/********************************************************************* * ????????????????将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); ???????});将HTML的页脚固定在屏幕下方
原文地址：http://www.cnblogs.com/zengjfgit/p/7427260.html