网站设计:将Footer固定在浏览器底部

　　在设计网站的时候，如果你某个页面的内容没有满屏，那你的footer会离浏览器底部很远，整体看起来很难看，这里用JavaScript提供一种方法来将footer固定在浏览器底部。

1	function fixFooter(){

2	var mainHeight = document.getElementById( 'main' ).offsetHeight;

3	var height = document.documentElement.clientHeight

4	- document.getElementById( "header" ).offsetHeight

5	- document.getElementById( "footer" ).offsetHeight;

6	if (mainHeight < height ){

7	document.getElementById( 'main' ).style.height= height + "px" ;

8

}

9

}

　　其中，main是你网页内容的id，header是菜单的id,footer是footer的id。当网站内容的高度小于多少时，那么获取header和footer的高度，并用document.documentElement.clientHeight减去他们，剩下的就是main的高度。

　　但是当你运行代码的时候，你会发现footer先是离底部有点距离，然后才到底部的，这样看起来很难看，可以加上下面语句隐藏这个过程，使得网页一打开footer就在底部。

1	document.getElementById( 'main' ).style.overflow= "hidden" ;

　　我们可以通过JavaScript获取很多关于浏览器的属性，这里列出各个属性的获取及其含义。

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

　　当然，如果你想让footer一直在浏览器底部，那么可以通过CSS来解决

1

#footer{

2	position : fixed ;

3	right : 0 ;

4	left : 0 ;

5	z-index : 1030 ;

6	bottom : 0 ;

7	margin-bottom : 0 ;

8

}

　　这样footer会一直在浏览器底部。

原文来自：http://www.iteblog.com/archives/1205