React 页面将页脚保留在页面底部

Question

尝试修复页面底部的页脚时出现问题，如下图所示：

虽然我用谷歌搜索并看到很多建议，但我仍然面临这个问题。我怀疑这个问题是 <div data-reactroot></div> 不能将高度设置为100%作为它的父母。谁能帮帮我？

提前致谢！

更新：页脚样式：

 borderTop: '1px solid #ddd',
height: '60px',
lineHeight: '60px',
backgroundColor: 'white'

原文由 An Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要告诉您的页脚将其自身定位到周围容器的底部：

页脚 CSS：

 position:absolute;
left:0;
bottom:0;
right:0;

对于容器（react-root div）：

 padding-bottom:60px;

---

作为替代方案（如果您不需要支持 IE 8），您可以在 div.container 上尝试这种风格：

 height: calc(100% - 60px);

原文由 mwoelk 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于上述解决方案不适用于任何其他人，您可以尝试以下步骤：

1. Give the parent div a non-static position such as relative (remember the default position is static )
2. 给 父 div 一个最小高度 100vh ；这使它能够垂直占据所有可用空间
3. 然后对于页脚（ child ），它应该被包裹在一个 div 如果不是一个，给它以下属性; position: absolute; bottom: 0; width: 100% 。

更新：在某些情况下，将页脚 div position 设置为 absolute 可能不起作用。在这种情况下，请改用 relative 。

希望上面的步骤可以解决它:-)

原文由 Ikechukwu Kalu 发布，翻译遵循 CC BY-SA 4.0 许可协议