将底栏固定在网页底部的好方法 bootstrap的navbar-static-bttom
【摘要】
navbar-static-bottom这个类可以使其固定在网页底部，并且不随网页滚动
<footer class="navbar-static-bottom">
testteset
...
navbar-static-bottom这个类可以使其固定在网页底部，并且不随网页滚动
<footer class="navbar-static-bottom">
testteset
</footer>
- 1
- 2
- 3
如果需要随网页滚动，则使用navbar-fixed-bottom类
<footer class="navbar-fixed-bottom">
testteset
</footer>
- 1
- 2
- 3
备注：要记得加上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>
- 1
- 2
- 3
- 4
除此之外，再介绍一种jQuery实现的方法，亲测可用(我当时用的就是jQuery实现的方案)
- css
footer {
height: 70px;
padding: 5px;
bottom: 0px;
width: 100%;
font-size: x-small;
background-color: lightgrey !important;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- html
<body>
....
<footer id="footer">testtest</footer>
</body>
- 1
- 2
- 3
- 4
- js
$(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);
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
文章来源: blog.csdn.net，作者：爱玲姐姐，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jal517486222/article/details/84098879
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）