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

261

CSS将Div推到页面底部

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

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

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

但是它所做的只是进入视口的底部，即使向下滚动也可以停留在视口的底部，因此它不再位于底部。

图片： 例如

很抱歉，如果没有弄清楚，我不希望将其修复，仅因为它位于所有内容的实际底部即可。

css  positioning  css-position  footer 
— 贝拉米
source
1
尝试一下position:fixed，尽管那并不是最好的方法
— redDevil 2012年
尝试位置：相对于身体。
1
你没有关门; 后位置：绝对。否则，它会完美地工作！
— AlexHighHigh

Answers:

545

这正是position: fixed为以下目的而设计的：

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

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

— 约瑟夫·西尔伯
source
65
该解决方案不适用于90％的情况。如果您调整窗口大小，则页脚将覆盖其他内容，并且不会立即在内容结尾处停下来
— vsync 2012年
10
@aroth是因为它们是两个完全不同的解决方案。此解决方案将使页脚始终保持在屏幕可视区域的底部。另一种解决方案是将页脚保留在屏幕底部或页面底部，具体取决于哪个较大-请求者所要求的。
— 我的头部受伤
6
@MyHeadHurts-你是绝对正确的。回答后，我意识到这不是OP想要的，但是我把它留给了那些寻找简单的固定页脚的人。从评论（和投票）看来，很多人都在为这个基本的CSS功能而苦苦挣扎。
— 约瑟夫·席尔伯
1
@MyHeadHurts-足够公平，尽管就我的金钱而言，它们基本上仍然相同。fixed如果有足够的内容，内容将在页脚下方滚动。对我来说足够了。当然，我可以看到非常大的页脚（如他们在stackoverflow上的页脚）无法很好地使用此fixed方法，但是我认为对于基本的单行页脚，此方法效果很好。
— aroth 2012年
@aroth我同意，这是一个很好的解决方案，这完全取决于您想要什么。我只是在指出为什么一个解决方案比另一个解决方案更复杂->他们没有做同样的事情。
— 我的头部受伤
187

不幸的是，您不能仅添加一些额外的HTML并让一个CSS依赖另一个CSS。

的HTML

首先你需要用你的header，footer并且#body到#holderDIV：

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

的CSS

然后设置height: 100%为html和body（实际主体，而不是您的#bodydiv），以确保您可以将最小高度设置为子元素的百分比。

现在min-height: 100%在#holderdiv 上进行设置，以使其填充屏幕内容，并用于position: absolute将页脚放在#holderdiv 的底部。

不幸的是，您必须向div设置与高度相同padding-bottom的#bodydiv，footer以确保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/

— 我头疼
source
我不明白为什么width：100％; 是必需的
— Somnath Kharat
4
@sTACKoVERFLOW-如果您未指定a width 或两者 都不指定left，right则将值设置为auto，并且元素将自动换行以适合其内容。指定width: 100% 或 left: 0并right:0确保绝对定位的元素取容器元件的全宽度
— 我头疼
我一直在寻找类似的行为，但是在我的情况下，＃body div浮动了，说“ float：left”。短身示例有效，而长身示例无效。任何有关如何在#body div上使用float获得所需行为的建议。
— 贾廷
@Ian在回答中说，因为他没有足够的代表发表评论：如果在asp.net中“我的头疼”的回答有问题-您需要在主体中添加“ height：100％”生成的FORM标记以及HTML和BODY标记才能正常工作。
— msouth，2015年
如果要使它在div而不是整个体内起作用，请确保height=100%在所有包含元素（包括<form>元素）上指定。
— 本·凯恩2016年
13

刚刚想出了另一个解决方案，如上面的示例对我有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即可查看页脚

— 匿名
source
5

我意识到它说不要用它来“响应其他答案”，但是不幸的是我没有足够的代表在适当的答案上添加评论（！），但是...

如果您在asp.net中遇到“我的头部受伤”的答案时遇到问题-您需要在主要生成的FORM标签以及HTML和BODY标签中添加“ height：100％”，以使其正常工作。

— 伊恩
source
4

你没有关门; 后位置：绝对。否则，您上面的代码会完美地工作！

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
— 亚历克斯·高
source
3

如果可以的话，我会发表评论，但是我还没有权限，所以我将发布提示作为答案，以解决某些android设备上的意外行为：

位置：通过使用以下元标记，已修复仅在Android 2.1至2.3中有效： 

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

参见http://caniuse.com/#search=position

— Tarciso Junior
source
2

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

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

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

通过将我的所有主要内容放在一个额外的div标签（id =“ outer”）中，我已经解决了一个类似的问题。然后，我将id =“ footer”的div标签移到了最后一个“外部” div标签之外。我使用CSS来指定“外部”的高度，并指定“页脚”的宽度和高度。我还使用CSS将“页脚”的左边距和右边距指定为自动。结果是页脚牢牢地位于我页面的底部，并且也随页面一起滚动（尽管它仍然出现在“外部” div内，但是很高兴在主要“内容” div之外。这似乎很奇怪，但是我想要的地方）。

— 大卫·B
source
1

我只想补充一下-其他大多数答案对我来说效果很好；但是，花了很长时间才让他们工作！

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

...因为“持有人”将直接从“身体”获得身高。

感谢我的头疼，我的答案就是我最终开始工作！

然而。如果您的html嵌套较多（因为它只是整个页面的一个元素，或者它位于某个列中，等等），则需要确保每个包含元素height: 100%的div上都已设置。否则，关于高度的信息将在“身体”和“持有人”之间丢失。

例如，在下面的示例中，我向每个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: 100%;
}

那解决了我的问题！

— 蒂姆·L
source
0

如果您有固定高度的页脚（例如712px），则可以使用js来做到这一点，如下所示：

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
— 乔治·卡林
source
0 
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
— Praveen Kundu
source
请在您的答案中说明问题所在，以及如何解决此
— 摘要
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.