/********************************************************************* * 将HTML的页脚固定在屏幕下方 * 说明： * 处理的方法好像是比较多的，个人还是比较倾向于用JS进行处理。 * * 2017-8-25 深圳 龙华樟坑村 曾剑锋 ********************************************************************/ 一、参考文档： 1. 将footer固定在页面底部的实现方法 https://segmentfault.com/a/1190000004453249 二、采用代码： 1. HTML： <body> <header>header</header> <main>main content</main> <footer>footer</footer> </body> 2. CSS： html,body{margin:0;padding: 0;} header{background-color: #ffe4c4;} main{background-color: #bdb76b;} footer{background-color: #ffc0cb;} /* 动态为footer添加类fixed-bottom */ .fixed-bottom {position: fixed;bottom: 0;width:100%;} 3. JS： $(function(){ function footerPosition(){ $("footer").removeClass("fixed-bottom"); var contentHeight = document.body.scrollHeight, //网页正文全文高度 winHeight = window.innerHeight; //可视窗口高度，不包括浏览器顶部工具栏 if(!(contentHeight > winHeight)){ //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom $("footer").addClass("fixed-bottom"); } } footerPosition(); $(window).resize(footerPosition); });