随笔- 672 文章- 2 评论- 325 阅读- 281万

制作浮动无刷新div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>实现div无刷新漂浮</title>
<style type="text/css">
/*---------------------
>=IE7或FireFox使用position:fixed实现div无刷新漂浮
*/
.tf1{
    position:fixed;
    width:50px;
    height:50px;
    border:solid 1px black;
    top:50px;
    left:200px;
}

/*-----------------------
IE7以下用这个办法可以保持div无刷新漂浮(当然也适用于IE6以上的版本，不过显得太麻烦),主要是利用当标签的position:absolute且该标签的祖先标签中没有一个为相对或绝对定位
，这时该标签就相对于根标签:html标签定位,只要html标签不随浏览器的滚动条滚动，那么相对定位于html的标签也不会动
*/
html{overflow:auto;height:100%;}
/*------------------------------------
注意：html标签的overflow属性很特殊，它代表的不是当子节点的长宽超过自己长宽的时候应该怎么办，而是代表自己(即html)的长宽超过自己父节点(即浏览器)的长宽该怎么办,默认是auto(即超过就在浏览器上显示滚动条)
--------------------------------------*/
/*------------------------------------
因为html的overflow属性不代表子节点的行为，所以当overflow:auto时:
(1)当给它设置的height值小于body加上body的外边距(margin)时，它的高度就等于body加上body的外边距(margin)
(2)当它的height大于body加上body的外边距(margin)时,它的高度就等于自己设置的height值
(3)此外html的height为100%时,若body的高度小于浏览器高度，则html的高度就为浏览器高，若body高度大于浏览器高，则html的高度等于body加上body的外边距(margin)
(4)如果不设置,html的高度就为body加上body的外边距(margin)

--------------------------------------*/
body{overflow:auto;height:100%;margin:0 0 0 0;}
/*------------------------------------
注意：
body的height:100%时:
(1)若overflow:auto,且html指定了height,body则表示和浏览器的高度一样(且会随着浏览器的大小而变化)>>>>注意在IE8的非兼容性视图中,若body的height为100%且html的height不为:100%,则body的高会为html指定的height值
(2)若overflow:auto,且未指定html的高度,body则和自己的子节点的高度和(即body内要占位的所有标签高度的和)一样高
(3)若overflow未指定,body则和自己的子节点的高度和(即body内要占位的所有标签高度的和)一样高

若body的height不为100%则body高度为其height值

如果不设置就和子节点的高度和(即body内要占位的所有标签高度的和)一样高

这里设置body的overflow为auto是让body的滚动条代替浏览器的滚动条
--------------------------------------*/
.tf2{
    position:absolute;
    width:50px;
    height:50px;
    border:solid 1px red;
    top:50px;
    left:80px;
}

/*------------------------------------
综上所述:将
html{overflow:auto;height:100%;}
body{overflow:auto;height:100%;margin:0 0 0 0;}
再设置要漂浮的div的position为absolute且不嵌套在任何为相对或绝对定位的标签中，即可得到IE任何版本和FireFox兼顾的漂浮办法，
但是若只针对>=IE7或FireFox开发还是用position:fixed好些，毕竟少些麻烦！
--------------------------------------*/

</style>
</head>
<body>
-----------------基线-----------------
<div style="height:3000px;">
<span class="tf1">
ie<=IE7
</span>
<span class="tf2">
ie>IE7
</span>
</div>
</body>
</html>