如何在Content DIV中停止粘性页脚
我一直在调整我的粘性脚注，希望在它到达#body div时阻止它，但到目前为止，我还没有成功。在大多数情况下，它通常不会涵盖内容，但是on this page，它通常会涵盖内容。
如果可能的话，我想把它贴在窗口的底部，但我唯一能想到的其他解决方案就是固定位置。有什么建议吗？
回答 3
Stack Overflow用户
发布于 2013-04-28 13:27:55
你可以通过多种方式来应用固定位置/粘性页脚。一种选择是只使用CSS，作为Twitter Bootstraps Sticky Footer example。这可能是最简单的实现。
/* The html and body elements cannot have any padding or margin. */
html,body { height: 100%; }
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* Negative indent footer by it's height */
}
/* Set the fixed height of the footer here */
#push,#footer{ height:100px }
#footer {}Stack Overflow用户
发布于 2013-04-28 13:15:17
我不确定你想要的结果，但可能你需要的就像：
#footer {
position: fixed;
bottom: 0;
left:0;
right:0;
}Stack Overflow用户
发布于 2013-04-28 13:49:02
根据Ryan Fait的说法，您可以在文档layout.css中使用以下CSS：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /*-4em represents the height of the footer */
}
.footer, .push {
height: 4em;
}以及下面的HTML标记，它实际上很容易实现，并且可以在所有主要浏览器中使用。
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Website Footer Here.</p>
</div>
</body>
</html>我以前实现过它，它可以完美地使用页脚，无论是在页面的底部，还是在内容的底部，而且它根本不需要jquery或javascript。
为了响应kurzweilguy的comment，推送使它可以使页脚位于100%高度，这自然会将页面扩展为具有滚动条，因此为了应对它，您可以在页面上设置负边距以使其恢复到适合页面底部的大小。darcher引用的页脚使用相同的页脚。这是一个编译得非常好的页脚！
https://stackoverflow.com/questions/16259636
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号