Question

请查看该链接，我想要相反：当内容溢出到滚动条时，我希望我的页脚始终位于页面的完整底部，如Stack Overflow。

我有一个带id="footer"的div和这个CSS：

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

但它所做的只是转到视口的底部，即使向下滚动也会停留在那里，所以它不再位于底部。

图片： Examlple

对不起，如果不澄清，我不希望它被修复，只是因为它在所有内容的实际底部。

Answer 1

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

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

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

Answer 2

不幸的是，你不能通过添加一些额外的HTML并让一块CSS依赖另一块来做到这一点。

HTML 的

首先，您需要将header，footer和#body包装到#holder div：

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

CSS

然后将height: 100%设置为html和body（实际正文，而不是#body div），以确保您可以将最小高度设置为子元素的百分比。< / p>

现在在min-height: 100% div上设置#holder，以便填充屏幕内容并使用position: absolute将页脚放在#holder div的底部。< / p>

不幸的是，您必须将padding-bottom应用于与#body高度相同的footer 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/

Answer 3

刚刚找到另一个解决方案，如上例所示，我有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来查看页脚

plunker

Answer 4

我意识到它不会用这个'回答其他答案'但不幸的是我没有足够的代表在适当的答案（！）上添加评论但是......

如果您在asp.net中遇到“My Head Hurts”答案时遇到问题 - 您需要在主生成的FORM标签以及HTML和BODY标签中添加“height：100％”，以便工作

Answer 5

你没有关闭你的;位置后：绝对。否则你上面的代码就会完美无缺！

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

Answer 6

我会评论，如果我可以，但我还没有权限，所以我会发布一个提示作为答案，在一些Android设备上的意外行为：

位置：已修复仅适用于Android 2.1至2.3，使用以下元标记：

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

请参阅http://caniuse.com/#search=position

Answer 7

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

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

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

Answer 8

如果你有一个固定的高度页脚（例如712px）你可以用js这样做：

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

Answer 9

我通过将所有主要内容放在一个额外的div标签中来解决类似问题（id =＆＃34; outer＆＃34;）。然后我用div =＆＃34;页脚＆＃34;移动了div标签。在最后一个＆＃34;外部＆＃34; div标签。我已经使用CSS来指定＆＃34;外部＆＃34;的高度。并指定＆＃34;页脚＆＃34;的宽度和高度。我还使用CSS来指定＆＃34;页脚＆＃34;的页边距和页边距。作为汽车。结果是页脚牢牢地坐在我页面的底部并且也随页面滚动（尽管它仍然出现在＆＃34;外部＆＃34; div中，但是在主要＆＃34之外很开心34;内容＆＃34; div。这看起来很奇怪，但它是我想要的地方。）

Answer 10

我只想补充一点 - 其他大多数答案对我来说都很好;然而，让它们工作需要很长时间！

这是因为设置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; 
}

... as＆＃34; holder＆＃34;将直接从＆＃34; body＆＃34;

中获取它的高度

感谢我的头部疼痛，他的答案是我最终开始工作的那个！

然而。如果你的html更嵌套（因为它只是整页的一个元素，或者它在某个列中等等），那么你需要确保每个包含元素在div上都设置了height: 100%。否则，＆＃34; body＆＃34;之间的高度信息将会丢失。和＆＃34;持有人＆＃34;。

E.g。以下，我已经添加了＆＃34;全高＆＃34;每个div的类，以确保高度一直到我们的标题/正文/页脚元素：

<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: 100%;
}

解决了我的问题！

Answer 11

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

Answer 12

使用固定底部引导程序类

<div id="footer" class="fixed-bottom w-100">

即使有滚动条，也让div始终保持在页面内容的底部

12 个答案: