一般,在网页上,如果内容较少,页脚就会跑到屏幕中间去,可能会让用户感到蛋疼。

上次看了一篇文章,用CSS的办法来固定页脚到浏览器窗口底部。他优点很明显,不需要JS,并且在调整浏览器窗口大小的时候仍然可以自适应,但写法略复杂,如果项目比较赶进度,就不太能用上了。

今天我就遇到了赶进度的蛋疼事情,所以用JQuery简单搞了一个,但本人前端开发水平很烂,有不完善的地方,高手莫喷。代码如下:

// 重定位页脚函数
function repositionFooter(){
	var h = $(window).height();
	$(".innerBlock").css('min-height',h - 230)
};

// 用户调整窗口大小时重定位页脚
var resizeTimer = null;
$(window).bind('resize', function(){
	if(resizeTimer) clearTimeout(resizeTimer);
	resizeTimer = setTimeout(repositionFooter,100);
	
});

// 页面加载的时候重定位页脚
$(document).ready(repositionFooter);

.innerBlock是内容box的class,这段代码的作用是:获取当前document对象的高度,然后减去header的高度,设给内容box,于是页脚就在屏幕最下面了。