我希望实现以下问题的相反行为:CSS推Div到页面底部。也就是说，当内容溢出到滚动条时，我希望页脚位于页面底部，就像Stack Overflow一样。
我有一个div id="footer"和下面的CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
这将把div移动到视口的底部——但即使你向下滚动页面，元素也会留在那里，所以它不再在底部。
我怎么能确保div保持在页面的内容底部，即使当内容溢出?我不寻找固定的位置，只寻找元素在所有内容的底部。
图片:
当前回答
我只是想补充一点，大多数其他答案对我来说都很好;然而，花了很长时间让他们工作!
这是因为设置高度:100%只选取父div的高度!
所以如果你的整个html(在主体内部)看起来像下面这样:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
那么以下就可以了:
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;
}
.．.因为“holder”将直接从“body”中获取它的高度。
向My Head Hurts致敬，他的答案是我最终开始工作的答案!
然而。如果你的html更嵌套(因为它只是整个页面的一个元素，或者它在某个列中，等等)，那么你需要确保每个包含元素也有高度:100%设置在div上。否则，高度的信息将丢失在“body”和“holder”之间。
例如下面，我在每个div中添加了“full height”类，以确保高度一直向下到我们的header/body/footer元素:
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
记住在css中的full-height类中设置height:
#full-height{
height: 100%;
}
这解决了我的问题!
其他回答
我只是想补充一点，大多数其他答案对我来说都很好;然而，花了很长时间让他们工作!
这是因为设置高度:100%只选取父div的高度!
所以如果你的整个html(在主体内部)看起来像下面这样:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
那么以下就可以了:
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;
}
.．.因为“holder”将直接从“body”中获取它的高度。
向My Head Hurts致敬，他的答案是我最终开始工作的答案!
然而。如果你的html更嵌套(因为它只是整个页面的一个元素，或者它在某个列中，等等)，那么你需要确保每个包含元素也有高度:100%设置在div上。否则，高度的信息将丢失在“body”和“holder”之间。
例如下面，我在每个div中添加了“full height”类，以确保高度一直向下到我们的header/body/footer元素:
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
记住在css中的full-height类中设置height:
#full-height{
height: 100%;
}
这解决了我的问题!
这是一个直观的解决方案，使用viewport命令将最小高度设置为视口高度减去页脚高度。
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
我意识到它说不要用这个来“回复其他答案”，但不幸的是，我没有足够的代表在适当的答案上添加评论(!)，但是……
如果你在asp.net中遇到来自“My Head Hurts”的答案的问题，你需要添加“height: 100%”到主要生成的FORM标签以及HTML和BODY标签中，以使其工作。
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).
你没有合上你的;后位:绝对。 否则，您上面的代码将完美地工作!
#footer {
position:absolute;
bottom:30px;
width:100%;
}
