footer始终固定于窗口底部(支持ie6的fixed效果)

footer始终固定于窗口底部(支持ie6的fixed效果)
作者：Neoxone 发表时间： 2008年08月28号，星期四阅读：23,495 次

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
html,body{ _height:100%; _overflow:hidden;}
body{ _overflow:auto;}
#header,#footer{
 width:100%;
 position:fixed;
 _position:absolute;
 background:#eee;
 left:0px;
}
#content{background:#ccc;padding:20px;}
#header{top:0;}
#footer{bottom:0;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">
<script language="javascript">
for(i=0;i<100;i++){
	document.write(i+"<br />");
}
</script>
</div>
<div id="footer">footer</div>
</body>
</html>

以上是一个支持ie6的fixed效果。
针对ie6的关键代码如下：

html,body{height:100%;overflow:hidden;}
body{overflow:auto;}

经过以上设置之后，在使用position:absolute时就能模拟出fixed效果了。
一般来说我们使用hack让其他浏览器直接用fixed属性，而让ie6使用这段代码。

如果不想单独对ie6使用hack,全部使用这段针对ie6的代码，也是可以的。代码如下：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
body{overflow:auto;}
#header,#footer{
 width:100%;
 position:absolute;
 background:#eee;
 left:0px;
}
#content{background:#ccc;padding:20px;}
#header{top:0;}
#footer{bottom:0;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">
<script language="javascript">
for(i=0;i<100;i++){
	document.write(i+"<br />");
}
</script>
</div>
<div id="footer">footer</div>
</body>
</html>

然而这种方法有个很大的缺陷，它会使body内元素无法“正常”使用absolute和relative定位（最起码在ie6下不能避免了）。

为了解决这个问题，我们可以把对body的设置下移，放在下级与fixed效果层同级的层content上面。
改进如下：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
html,body{_height:100%;_overflow:hidden;}
#content{
	_height:100%;
	_overflow:auto;
	position:relative;
	z-index:2;
}
#footer{
	position:fixed;
	_position:absolute;
	width:200px;
	background:#f00;
	right:0;
	bottom:0;
	z-index:1;
}
</style>
</head>
<body>
<div id="content">
	<script language="javascript">
	for(i=0;i<100;i++){
		document.write(i+"<br />");
	}
	</script>
	<div style="position:absolute;top:50px;left:5px;text-align:right;border:1px solid #aaa;"> 123<br /> 123<br /> 123<br /> 123<br /> 123<br /> 123<br />在ie6下，这里也可以表现出absolute的效果 </div>
</div>
<div id="footer">footer</div>
</body>
</html>

这么改进之后，其实还是会有一个下缺陷：在ie6下，content会有部分被遮盖。

标签： fixed, footer