使div始终停留在页面内容的底部，即使有滚动条

我希望实现与以下问题相反的行为:CSS把Div推到页面底部。也就是说，当内容溢出到滚动条时，我希望页脚位于页面底部，就像Stack Overflow一样。

我有一个带有id="footer"和以下CSS的div:

#footer {
position: absolute;
bottom: 30px;
width: 100%;
}

这将把div移动到视口的底部——但即使你向下滚动页面，元素也会留在那里，所以它不再在底部。

我怎么能确保div保持在页面的内容底部，即使当内容溢出?我不寻找固定的位置，只寻找元素在所有内容的底部。

图片:Example

854926 次浏览
小开
最佳答案

这正是position: fixed设计的目的:

#footer {
position: fixed;
bottom: 0;
width: 100%;
}

这是小提琴:http://jsfiddle.net/uw8f9/

小开

不幸的是，如果不添加一点额外的HTML，让一个CSS依赖另一个CSS，就无法做到这一点。

超文本标记语言

首先，你需要将你的header，footer和#body包装到一个#holder div中:

<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>

CSS

然后将height: 100%设置为html和body(实际的身体，而不是你的#body div)，以确保你可以设置最小高度作为子元素的百分比。

现在在#holder div上设置min-height: 100%，以便它填充屏幕的内容，并使用position: absolute位于#holder div底部的页脚。

不幸的是，你必须将padding-bottom应用于与footer高度相同的#body div，以确保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;
}

工作示例，短体:http://jsfiddle.net/ELUGc/

工作示例，长体:http://jsfiddle.net/ELUGc/1/

小开

刚刚为我制定了另一个解决方案，如上面的例子有bug(某处错误)。所选答案的变化。

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;
}

HTML布局

<body>
<div id="nonFooter">header,middle,left,right,etc</div>
<div id="footer"></div>
</body>

好吧，这种方式不支持旧浏览器，但它可以接受的旧浏览器向下滚动30px查看页脚

小开

我意识到它说不要用这个来“回复其他答案”，但不幸的是，我没有足够的代表在适当的答案上添加评论(!)，但是……

如果你在asp.net中遇到来自“My Head Hurts”的答案的问题，你需要添加“height: 100%”到主要生成的FORM标签以及HTML和BODY标签中，以使其工作。

小开

如果我可以的话，我会评论，但我还没有权限，所以我会张贴一个提示作为答案，对于一些android设备上的意外行为:

定位:固定只适用于Android 2.1到2.3使用以下元标签:

<meta name="viewport" content="width=device-width, user-scalable=no">.

看到http://caniuse.com/#search=position

小开

这是一个直观的解决方案，使用viewport命令将最小高度设置为视口高度减去页脚高度。

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}


#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
小开

如果你有一个固定高度的页脚(例如712px)，你可以用js这样做:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
小开
我已经解决了一个类似的问题，把我所有的主要内容在一个额外的div标签(id="outer")。然后我把id="footer"的div标签移到最后一个"outer" div标签的外面。 我使用CSS来指定“outer”的高度，并指定“footer”的宽度和高度。我还使用CSS将“footer”的左右边距指定为auto。结果是，页脚牢牢地坐在我的页面底部，并与页面滚动(尽管，它仍然出现在“外部”div内，但令人高兴的是，在主要的“内容”div之外。这似乎很奇怪，但它是我想要它的地方)
小开

你没有关闭你的;后位:绝对。 否则，您上面的代码将完美地工作!< / p > 

#footer {
position:absolute;
bottom:30px;
width:100%;
}
小开

我只是想补充一点，大多数其他答案对我来说都很好;然而，花了很长时间让他们工作!

这是因为设置height: 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更嵌套(因为它只是整个页面的一个元素，或者它在某个列中，等等)，那么你需要确保每个包含元素在div上也设置了height: 100%。否则，关于高度的信息将在“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%;
}

这解决了我的问题!

小开 
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
小开

我在页脚上打了一个边距:auto，它做到了!我在这里评论，只是以防它可以帮助任何未来的游客。


提交答案