详解HTML5将footer置于页面最底部的方法(CSS+JS)

本文介绍了详解HTML5将footer置于页面最底部的方法(CSS+JS)，分享给大家，具体如下：

JavaScript:

1. <script type="text/javascript">
2. $(function(){
3. function footerPosition(){
4. $("footer").removeClass("fixed-bottom");
5. //网页正文全文高度
6. var contentHeight = document.body.scrollHeight,
7. //可视窗口高度，不包括浏览器顶部工具栏
8. winHeight = window.innerHeight;
9. if(!(contentHeight > winHeight)){
10. //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
11. $("footer").addClass("fixed-bottom");
12. } else {
13. $("footer").removeClass("fixed-bottom");
14. }
15. }
16. footerPosition();
17. $(window).resize(footerPosition);
18. });
19. </script>

CSS:

1. .fixed-bottom {
2. position: fixed;
3. bottom: 0;
4. width:100%;
5. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。