html页脚固定,jQuery实现页脚永远固定在页面底部

使用下面的jQuery代码，可以轻松的帮我们实现页脚永远固定在页面底部(即页脚永远固定在页面的底部，而非永远固定在浏览器窗口的底部，换句话说，就说当页面主内容没有显示屏幕高时，页脚固定在显示器屏幕的底部，但当页面内容超过显示器屏幕高度时，页脚又会跟随内容往下沉，但页脚都永远固定在页的底部)，使用这种方法有几个地方需要注意：

1. 确保正常引入了jQuery版本库，并正常调入了上面那段jQuery代码；

2. 确保

是在body中最后；

3. 确保在html,body中没有设置高度为100%。

优点：

结构简单，无需外加无用标签，兼容所有浏览器，不用另外写特别样式。页脚可以不固定高度。

缺点：

在不支持js的浏览器中无法正常显示，另外每次改变浏览器大小会闪动一下。

jQuery实现页脚永远固定在页面底部

*{margin:0;padding:0}

.clearfix:after,.clearfix:before{content:"";display:table}

.clearfix:after{clear:both}

.clearfix {zoom:1; /* IE <8 */}

#footer{height: 60px;background: #fc6;width: 100%;}

/*==========其他div==========*/

#header{padding:10px;background:#0f0}

#left{width:18%;float:left;margin-right:2%;background:orange}

#content{width:60%;float:left;margin-right:2%;background:green}

#right{width:18%;float:left;background:#ff0}

// Window load event used just in case window height is dependant upon images

$(window).bind("load", function() {

var footerHeight = 0,

footerTop = 0,

$footer = $("#footer");

positionFooter();

//定义position Footer function

function positionFooter() {

//取到div#footer高度

footerHeight = $footer.height();

//div#footer离屏幕顶部的距离

footerTop = ( $(window).scrollTop()+$(window).height()-footerHeight)+"px";

/* DEBUGGING STUFF

console.log("Document height: ", $(document.body).height());

console.log("Window height: ", $(window).height());

console.log("Window scroll: ", $(window).scrollTop());

console.log("Footer height: ", footerHeight);

console.log("Footer top: ", footerTop); console.log("-----------")

*/

//如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位

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);

});

Header Section

Left sidebar

Main Content

Right Content

Footer Section