让body的clientHeight与html的clientHeight相等的方法

body元素是自适应高度的块级元素，当页面内容比较少时，它的高度会小于默认浏览器的可是区域高度；html元素的高度是默认等于浏览器视窗的高度的

从文档结构上来说 body是html的子元素，按道理设置body{ height:100%;},可以让它和html元素高度相等，实际发现没没效果。需要设置 html,body{height:100%}才能让两者的高度相等

测试代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
html{height:100%; background:yellow;}
body{height:100%; background:#eee;}
 .pos{background:blue; height:300px; border:1px solid red; }
 .hi{background-image:url("s.jpg"); background-repeat:no-repeat; background-position:20px 40px; }
</style>
</head>
<body>
<p class="pos hi">some text here </p>
<script>
alert(document.documentElement.clientHeight);
alert(document.body.clientHeight);
</script>
</body>
</html>

 

posted @ 2013-05-03 14:24  stephenykk  阅读(293)  评论(0)  编辑  收藏  举报