`

纯CSS兼容IE6的模拟的fixed效果_不抖动

    博客分类：
  • css
css 
阅读更多

 

<!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>
分享到：
| Properties文件-增删改查
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics