navbar-static-bottom
这个类可以使其固定在网页底部,并且不随网页滚动
<footer class="navbar-static-bottom">
testteset
</footer>
如果需要随网页滚动,则使用navbar-fixed-bottom
类
<footer class="navbar-fixed-bottom">
testteset
</footer>
备注:要记得加上bootstrap的CDN,否则会失败
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
除此之外,再介绍一种jQuery实现的方法,亲测可用(我当时用的就是jQuery实现的方案)
footer {
height: 70px;
padding: 5px;
bottom: 0px;
width: 100%;
font-size: x-small;
background-color: lightgrey !important;
}
<body>
....
<footer id="footer">testtest</footer>
</body>
$(window).bind("load", function () {
var footerHeight = 0, footerTop = 0, $footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";
if (($(document.body).height() + footerHeight) < $(window).height()) {
$footer.css({position: "absolute"}).stop().animate({top: footerTop});
} else {
$footer.css({position: "static"});
}
}
$(window).scroll(positionFooter).resize(positionFooter);
});