纯CSS兼容IE6的模拟的fixed效果_不抖动-优快云博客

本文介绍了使用纯CSS实现固定底部效果的方法，并确保了在不同浏览器间的兼容性，特别是IE6。通过特定的布局技巧，文章展示了如何创建一个始终位于页面底部的浮动栏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS兼容IE6的模拟的fixed效果</title>
<style>
* { margin:0; padding:0; }
html, body { height:100%; overflow:hidden; }
.page { height:100%; overflow:auto; }
.floatbar { position:absolute; bottom:0; left:2%; border:1px solid #ccc; background:#06c; color:#fff; height:30px; width:95%; }
</style>
</head>
<body>
<!--此处page的div模拟body的表现-->
<div class="page">
	<div style="height:1500px">内容区</div>
</div>
<!--/此处page的div模拟body的表现-->
<div class="floatbar">模拟的固定fixed效果 </div>
</body>
</html>

绝对底部效果:

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对底部</title>
<style type="text/css">
* { margin:0; padding:0; }
html, body { height:100%; }
.wrapper { min-height:100%; _height:100%; }
.body { padding-bottom:100px; }
.footer { margin-top:-100px; height:100px; background:red; }
</style>
</head>
<body>
<div class="wrapper">
	<div class="body">
		<script type="text/javascript">
		for(var i=0; i<10; i++){ //可增加或减少i值
			document.write(i+"<br />");
		}
		</script>
	</div>
</div>
<div class="footer"> footer </div>
</body>
</html>