即使有滚动条，也让 div 始终停留在页面内容的底部
Posted
技术标签:
【中文标题】即使有滚动条，也让 div 始终停留在页面内容的底部【英文标题】：Make div stay at bottom of page's content all the time even when there are scrollbars 【发布时间】：2012-02-08 03:17:26 【问题描述】：CSS Push Div to bottom of page
请看那个链接，我想要相反：当内容溢出到滚动条时，我希望我的页脚总是在页面的完整底部，就像 Stack Overflow。
我有一个带有 id="footer" 的 div 和这个 CSS：
#footer
position: absolute;
bottom: 30px;
width: 100%;
但它所做的只是转到视口的底部，即使向下滚动也会停留在那里，因此它不再位于底部。
图片：
对不起，如果没有澄清，我不希望它被修复，只是让它在所有内容的实际底部。
【问题讨论】：
试试position:fixed，虽然这并不是最好的方法
尝试位置：相对于身体。
你没有关闭你的 ;后位置：绝对。否则它会工作得很好！
【参考方案1】：
这正是 position: fixed 的设计目的：
#footer
position: fixed;
bottom: 0;
width: 100%;
这是小提琴：http://jsfiddle.net/uw8f9/
【讨论】：
该解决方案不适用于 90% 的情况。如果您重新调整窗口大小，您的页脚将覆盖其他内容，并且不会停在内容的末尾 @aroth 那是因为它们是两种完全不同的解决方案。此解决方案将始终将页脚保持在屏幕可视区域的底部。另一种解决方案将页脚保留在屏幕底部或页面底部，具体取决于哪个更大 - 这是提问者所要求的。 @MyHeadHurts - 你完全正确。回答后，我意识到这不是 OP 想要的，但我把它留在这里给那些寻找简单固定页脚的人。从 cmets（和投票）来看，似乎很多人都在为这个基本的 CSS 特性而苦苦挣扎。 @MyHeadHurts - 很公平，尽管就我的钱而言，它们仍然基本相同。当有足够的内容时，内容会在fixed 页脚下方滚动。这对我来说已经足够了。当然，我可以看到 very large 页脚（如 *** 上的页脚）在 fixed 方法中效果不佳，但对于基本的单行页脚，我认为这种方法效果很好。
@aroth 我同意，这是一个很好的解决方案，这完全取决于您想要什么。我只是指出为什么一种解决方案比另一种更复杂 -> 他们不做同样的事情。【参考方案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）以确保您可以将最小高度设置为子元素的百分比。
现在在#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/
【讨论】：
我不明白为什么 width:100%;是必需的 @sTACKoOVERFLOW - 如果您不指定width 或两者 left 和right 然后值设置为auto 并且元素将换行以适应其内容。指定width: 100% 或 left: 0 和right:0 确保绝对定位的元素占据容器元素的整个宽度
我一直在寻找类似的行为，但在我的情况下，#body div 是浮动的，比如“float: left”。短体示例有效，但长体示例无效。任何建议我如何使用 #body div 上的浮动来获得所需的行为。
@Ian 在回答中说，因为他没有足够的代表发表评论：如果您在 asp.net 中遇到“我的头疼”的答案时遇到问题 - 您需要添加“ height : 100%' 到主要生成的 FORM 标记以及 HTML 和 BODY 标记，以使其正常工作。
如果您想让它在 div 内而不是在整个主体内工作，请确保在 all 包含的元素上指定 height=100%，包括<form> 元素。【参考方案3】：
刚刚为我制定了另一个解决方案，如上例有错误（某处错误）。与所选答案不同。
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【讨论】：
【参考方案4】：我意识到它说不要使用它来“回复其他答案”，但不幸的是我没有足够的代表来为适当的答案添加评论（！）但是......
如果您在 asp.net 中遇到“我的头疼”的答案时遇到问题 - 您需要在生成的主要 FORM 标记以及 HTML 和 BODY 标记中添加“height : 100%”，以便这样做工作。
【讨论】：
【参考方案5】：如果可以的话，我会发表评论，但我还没有权限，所以我会发布一个提示作为答案，以解决某些 android 设备上的意外行为：
位置：已修复，仅适用于 Android 2.1 至 2.3，使用以下元标记：
<meta name="viewport" content="width=device-width, user-scalable=no">.
见http://caniuse.com/#search=position
【讨论】：
【参考方案6】：这是一个使用视口命令的直观解决方案，只需将最小高度设置为视口高度减去页脚高度。
html,body
height: 100%
#nonFooter
min-height: calc(100vh - 30px)
#footer
height:30px;
margin: 0;
clear: both;
width:100%;
【讨论】：
【参考方案7】：如果您有一个固定高度的页脚（例如 712px），您可以使用 js 来执行此操作，如下所示：
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize()
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
【讨论】：
【参考方案8】：我通过将所有主要内容放在一个额外的 div 标签 (id="outer") 中解决了类似的问题。然后，我将 id="footer" 的 div 标签移到了最后一个“外部”div 标签之外。 我使用 CSS 来指定“outer”的高度并指定“footer”的宽度和高度。我还使用 CSS 将“页脚”的 margin-left 和 margin-right 指定为 auto。结果是页脚牢牢地位于我的页面底部并与页面一起滚动（尽管它仍然出现在“外部”div 内，但很高兴在主“内容”div 之外。这看起来很奇怪，但它我想要的地方）。
【讨论】：
【参考方案9】：你没有关闭你的 ;后位置：绝对。 否则你上面的代码会完美运行！
#footer
position:absolute;
bottom:30px;
width:100%;
【讨论】：
【参考方案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;
...因为“持有人”会直接从“身体”获取它的高度。
感谢我的头疼，他的答案是我最终开始工作的那个！
但是。如果您的 html 更加嵌套（因为它只是整个页面的一个元素，或者它在某个列中等），那么您需要确保 每个包含元素 在 div 上也设置了 height: 100%。否则，“body”和“holder”之间的身高信息会丢失。
例如下面，我在每个 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%;
这解决了我的问题！
【讨论】：
【参考方案11】：使用固定底部引导类
<div id="footer" class="fixed-bottom w-100">
【讨论】：
没有迹象表明 OP 正在使用 Bootstrap。【参考方案12】：position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
【讨论】：
请在您的回答中描述问题是什么，以及这个 sn-p 将如何解决它，以帮助其他人理解这个答案以上是关于即使有滚动条，也让 div 始终停留在页面内容的底部的主要内容，如果未能解决你的问题，请参考以下文章
我有一个大div,里面有很多个小div,大div设置了滚动条，我想第一个小div不受滚动条影响,始终显示.