网站设计中css样式使用技巧
来源：贵州诺维泰网络 类别：网站设计知识 发布时间：2013-01-14实现一个层固定在底部，随滚动条滚动(1.
<body scroll="no" style="margin:0px">
<div style="height:expression(document.body.clientHeight);overflow:auto;">
<div style="height:2000px">称大页面</div>
</div>
<div style="height:100px;background-color:#AAAAAA;position:relative;top:-100px;z-index:-1">bottom</div>
</body>
实现一个层固定在底部，随滚动条滚动(2.
<!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>
......
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;......} 针对IE7、Opera、Firefox一行搞定
</style>
IE6中利用容器对溢出内容的处理方式来实现的
<!--[if IE 6]> 利用IE独有的条件语句可以针对不同的IE版本精确设置，同时避免了这些代码被其他浏览器读到
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
fixed元素的绝对位置是相对于HTML元素来说，而滚动条是body元素的，这是设置right:17px的原因
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
<body scroll="no" style="margin:0px">
<div style="height:expression(document.body.clientHeight);overflow:auto;">
<div style="height:2000px">称大页面</div>
</div>
<div style="height:100px;background-color:#AAAAAA;position:relative;top:-100px;z-index:-1">bottom</div>
</body>
实现一个层固定在底部，随滚动条滚动(2.
<!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>
......
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;......} 针对IE7、Opera、Firefox一行搞定
</style>
IE6中利用容器对溢出内容的处理方式来实现的
<!--[if IE 6]> 利用IE独有的条件语句可以针对不同的IE版本精确设置，同时避免了这些代码被其他浏览器读到
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
fixed元素的绝对位置是相对于HTML元素来说，而滚动条是body元素的，这是设置right:17px的原因
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
