CSS 即使有滚动条，也让 div 始终停留在页面内容的底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8824831/
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
Make div stay at bottom of page's content all the time even when there are scrollbars
提问by H Bellamy
CSS Push Div to bottom of page
Please look at that link, I want the opposite: When the content overflows to the scrollbars, I want my footer to be always at the completebottom of the page, like Stack Overflow.
请看那个链接，我想要相反的：当内容溢出到滚动条时，我希望我的页脚总是在页面的完整底部，就像堆栈溢出一样。
I have a div with id="footer"and this CSS:
我有一个 divid="footer"和这个 CSS：
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
But all it does is go to the bottom of the viewport, and stays there even if you scroll down, so it is no longer at the bottom.
但它所做的只是转到视口的底部，即使向下滚动也停留在那里，因此它不再位于底部。
Image: 
图片：
Sorry if not clarified, I don't want it to be fixed, only for it to be at the actual bottom of all the content.
对不起，如果没有澄清，我不希望它被修复，只是因为它位于所有内容的实际底部。
回答by Joseph Silber
This is precisely what position: fixedwas designed for:
这正是position: fixed专为以下目的而设计的：
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
Here's the fiddle: http://jsfiddle.net/uw8f9/
这是小提琴：http: //jsfiddle.net/uw8f9/
回答by My Head Hurts
Unfortunately you can't do this with out adding a little extra HTML and having one piece of CSS rely on another.
不幸的是，如果不添加一点额外的 HTML 并且让一个 CSS 依赖另一个 CSS，就无法做到这一点。
HTML
HTML
First you need to wrap your header,footerand #bodyinto a #holderdiv:
首先你需要用你的header，footer并且#body到#holderDIV：
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
CSS
Then set height: 100%to htmland body(actual body, not your #bodydiv) to ensure you can set minimum height as a percentage on child elements.
然后设置height: 100%为html和body（实际主体，而不是您的#bodydiv）以确保您可以将最小高度设置为子元素的百分比。
Now set min-height: 100%on the #holderdiv so it fills the content of the screen and use position: absoluteto sit the footer at the bottom of the #holderdiv.
现在min-height: 100%在#holderdiv上设置，以便它填充屏幕的内容并用于position: absolute将页脚放在#holderdiv的底部。
Unfortunately, you have to apply padding-bottomto the #bodydiv that is the same height as the footerto ensure that the footerdoes not sit above any content:
不幸的是，您必须应用与 高度相同padding-bottom的#bodydivfooter以确保footer不会位于任何内容之上：
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
Working example, short body: http://jsfiddle.net/ELUGc/
工作示例，短体：http: //jsfiddle.net/ELUGc/
Working example, long body: http://jsfiddle.net/ELUGc/1/
工作示例，长体：http: //jsfiddle.net/ELUGc/1/
回答by Anonymous
Just worked out for another solution as above example have bug( somewhere error ) for me. Variation from the selected answer.
刚刚解决了另一个解决方案，因为上面的例子对我来说有错误（某处错误）。与所选答案的差异。
html,body {
height: 100%
}
#nonFooter {
min-height: 100%;
position:relative;
/* Firefox */
min-height: -moz-calc(100% - 30px);
/* WebKit */
min-height: -webkit-calc(100% - 30px);
/* Opera */
min-height: -o-calc(100% - 30px);
/* Standard */
min-height: calc(100% - 30px);
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
}
for html layout
用于 html 布局
<body>
<div id="nonFooter">header,middle,left,right,etc</div>
<div id="footer"></div>
</body>
Well this way don't support old browser however its acceptable for old browser to scrolldown 30px to view the footer
好吧，这种方式不支持旧浏览器，但是旧浏览器可以向下滚动 30px 以查看页脚
回答by Ian
I realise it says not to use this for 'responding to other answers' but unfortunately I don't have enough rep to add a comment onto the appropriate answer (!) but ...
我意识到它说不要使用它来“回复其他答案”，但不幸的是我没有足够的代表在适当的答案上添加评论（！）但是......
If you are having problems in asp.net with the answer from 'My Head Hurts' - you need to add 'height : 100%' to the main generated FORM tag as well as HTML and BODY tags in order for this to work.
如果您在 asp.net 中遇到来自“My Head Hurts”的答案的问题 - 您需要将“height : 100%”添加到主要生成的 FORM 标记以及 HTML 和 BODY 标记中，以使其正常工作。
回答by AlexHighHigh
You didn't close your ; after position: absolute. Otherwise your above code would have worked perfectly!
你没有关闭你的 ; 后位置：绝对。否则你上面的代码会完美运行！
#footer {
position:absolute;
bottom:30px;
width:100%;
}
回答by Tarciso Junior
I would comment if i could , but i have no permissions yet, so i will post a hint as an answer, for unexpected behavior on some android devices:
如果可以，我会发表评论，但我还没有权限，所以我会发布一个提示作为答案，以解决某些 android 设备上的意外行为：
Position: Fixed only works in Android 2.1 thru 2.3 by using the following meta tag:
位置：通过使用以下元标记，修复仅适用于 Android 2.1 到 2.3：
<meta name="viewport" content="width=device-width, user-scalable=no">.
回答by Obromios
This is an intuitive solution using the viewport command that just sets the minimum height to the viewport height minus the footer height.
这是使用 viewport 命令的直观解决方案，该命令只是将最小高度设置为视口高度减去页脚高度。
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
回答by Tim L
I just want to add - most of the other answers worked fine for me; however, it took a long time to get them working!
我只想补充 - 大多数其他答案对我来说都很好；然而，让他们工作需要很长时间！
This is because setting height: 100%only picks up parent div's height!
这是因为设置height: 100%只选取父 div 的高度！
So if your entire html (inside of the body) looks like the following:
因此，如果您的整个 html（主体内部）如下所示：
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
Then the following will be fine:
那么以下就可以了：
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
...as "holder" will pick up it's height directly from "body".
...因为“持有人”将直接从“身体”中获取它的高度。
Kudos to My Head Hurts, whose answer was the one I ended up getting to work!
感谢我的头疼，他的答案是我最终开始工作的答案！
However.If your html is more nested (because it's only an element of the full page, or it's within a certain column, etc) then you need to make sure every containing elementalso has height: 100%set on the div. Otherwise, the information on height will be lost between "body" and "holder".
然而。如果您的 html 嵌套更多（因为它只是整个页面的一个元素，或者它在某个列内等），那么您需要确保每个包含元素也已height: 100%在 div上设置。否则，“body”和“holder”之间将丢失高度信息。
E.g. the following, where I've added the "full height" class to every div to make sure the height gets all the way down to our header/body/footer elements:
例如，我在每个 div 中添加了“全高”类，以确保高度一直到我们的页眉/正文/页脚元素：
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
And remember to set height on full-height class in the css:
并记住在 css 中设置全高类的高度：
#full-height{
height: 100%;
}
That fixed my issues!
那解决了我的问题！
回答by David B
I've solved a similar issue by putting all of my main content within an extra div tag (id="outer"). I've then moved the div tag with id="footer" outside of this last "outer" div tag. I've used CSS to specify the height of "outer" and specified the width and height of "footer". I've also used CSS to specify the margin-left and margin-right of "footer" as auto. The result is that the footer sits firmly at the bottom of my page and scrolls with the page too (although, it's still appears inside the "outer" div, but happily outside of the main "content" div. which seems strange, but it's where I want it).
我通过将所有主要内容放在一个额外的 div 标签 (id="outer") 中解决了类似的问题。然后我将带有 id="footer" 的 div 标签移到最后一个“外部”div 标签之外。我已经使用 CSS 来指定“外部”的高度并指定“页脚”的宽度和高度。我还使用 CSS 将“footer”的 margin-left 和 margin-right 指定为自动。结果是页脚牢牢地坐在我的页面底部并且也随着页面滚动（尽管它仍然出现在“外部”div 内，但很高兴出现在主“内容”div 之外。这看起来很奇怪，但它是我想要的地方）。
回答by George Carlin
if you have a fixed height footer (for example 712px) you can do this with js like so:
如果您有固定高度的页脚（例如 712px），您可以像这样使用 js 执行此操作：
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
