Javascript React 页面将页脚保留在页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39857425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React page keep footer at the bottom of the page
提问by An Nguyen
I have a problem when try to fix footer at bottom of the page as below picture:
尝试修复页面底部的页脚时遇到问题，如下图：
Although I google and see many suggestions, but I'm still facing the problem. I suspect this problem is <div data-reactroot></div>cannot be set height 100% as its parents. Could anyone help me?
虽然我用谷歌搜索并看到了很多建议，但我仍然面临这个问题。我怀疑这个问题是<div data-reactroot></div>不能将高度 100% 设置为它的父母。有人可以帮助我吗？
Thanks in advance!
提前致谢！
Update: Style of footer:
更新：页脚样式：
borderTop: '1px solid #ddd',
height: '60px',
lineHeight: '60px',
backgroundColor: 'white'
回答by mwoelk
You need to tell your footer to position itself to the bottom of the surrounding container:
您需要告诉页脚将自身定位到周围容器的底部：
Footer css:
页脚CSS：
position:absolute;
left:0;
bottom:0;
right:0;
And for the container (the react-root div):
对于容器（react-root div）：
padding-bottom:60px;
As an alternative (if you don't need to support IE 8) you could try this style on the div.container:
作为替代方案（如果您不需要支持 IE 8），您可以在以下位置尝试这种风格div.container：
height: calc(100% - 60px);
回答by Ikechukwu Kalu
For any other person the above solutions do not work for, you could try the following steps:
对于上述解决方案不适用的任何其他人，您可以尝试以下步骤：
- Give the parent
diva non-staticpositionsuch asrelative(remember the defaultpositionisstatic) - Give the parentdiv a minimum height of
100vh; this enables it to take up all available space vertically - Then for the footer (child), which should be wrapped in a
divif not one, give it the following properties;position: absolute; bottom: 0; width: 100%.
- 给父母
div一个非静态的，position比如relative（记住默认position是static） - 给父div 的最小高度
100vh；这使它能够垂直占用所有可用空间 - 然后对于页脚（child），它应该被包裹在一个
divif not one 中，给它以下属性；position: absolute; bottom: 0; width: 100%.
UPDATE: In some cases, setting the footer divpositionto absolutemay not work. In such a case, use relativeinstead.
更新：在某些情况下，将页脚设置divposition为absolute可能不起作用。在这种情况下，请relative改用。
Hopefully, the steps above should fix it :-)
希望上面的步骤应该可以解决它:-)
回答by Ginte Ezerskyte
It is important to have content wrapper and set its min-height to 100vh:
重要的是要有内容包装器并将其最小高度设置为 100vh：
min-height: 100vh; (100% of the viewport height)
min-height: 100%; (100% of the parent's element height)
Look at here is very well explained and worked for me: https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
看看这里解释得很好，对我有用：https: //medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
回答by ceckenrode
Are you trying to have a wrapper for your page so you can absolutely position the footer at the bottom? If so, you can create a new component with relative position for that and pass the others in as children and give your footer absolute positioning at the bottom.
您是否正在尝试为您的页面添加一个包装器，以便您绝对可以将页脚定位在底部？如果是这样，您可以为此创建一个具有相对位置的新组件，并将其他组件作为子项传入，并在底部提供页脚绝对定位。
