我正在使用 Twitter Bootstrap，有页脚类吗？因为我无法让它停留在底部。这是我的 jsfiddle https://jsfiddle.net/fNPvf/18578/ 。这是页脚 css:
.footer-no-nav {
border-top: 1px solid #C2B8B8;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
这是我使用 bootstrap 类 navbar-fixed-bottom 时的图片
这是窗口调整大小时的情况:
解决了我的问题，不需要任何导航栏固定底部:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
最佳答案
听起来您正在寻找粘性页脚。
此处更新了 fiddle :https://jsfiddle.net/fNPvf/18589/
CSS 依赖于从 margin-top 中删除页脚的总高度，以使页脚粘在底部，除非有足够的内容将其进一步插入。对于 40 像素高度 + 1 像素边框顶部页脚，这将计算我们的顶部边距等于 -41 像素。
footer {
border-top: 1px solid #C2B8B8;
height:40px;
margin-top:-41px;
}
body,html{
height:100%;
}
.container{
min-height:100%;
}
<body>
<div class="container">main content can go here</div>
<footer>sticky footer content is stuck here</footer>
</body>
关于html - 页脚 Bootstrap 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32295275/