我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
当前回答
只需将类navbar-fixed-bottom添加到页脚。
<div class="footer navbar-fixed-bottom">
其他回答
OP回答:
将其添加到CSS文件中。
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #eee;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
以下是我对这个问题的最新解决方案。
/* Sticky footer styles
-------------------------------------------------- */
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;
border-top: 1px solid #eee;
text-align: center;
}
.site-footer-links {
font-size: 12px;
line-height: 1.5;
color: #777;
padding-top: 20px;
display: block;
text-align: center;
float: center;
margin: 0;
list-style: none;
}
像这样使用它:
<div class="footer">
<div class="site-footer">
<ul class="site-footer-links">
<li>© Zee and Company<span></span></li>
</ul>
</div>
</div>
Or
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
使用flex!确保在HTML中使用body和main,这是最好的解决方案之一(除非你需要IE9支持)。它不需要固定的高度或类似的东西。
这也推荐用于Materialize !
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
只需将类navbar-fixed-bottom添加到页脚。
<div class="footer navbar-fixed-bottom">
简单的 js
if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}
Update # 1
$(window).on('resize', function() {
$('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});