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

最新推荐文章于 2023-07-29 20:04:23 发布

dayanwu2842

最新推荐文章于 2023-07-29 20:04:23 发布

阅读量97

点赞数

原文链接：http://www.cnblogs.com/stephenykk/archive/2013/05/03/3056585.html

版权

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>

转载于:https://www.cnblogs.com/stephenykk/archive/2013/05/03/3056585.html

dayanwu2842

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让body的clientHeight与html的clientHeight相等的方法

body元素是自适应高度的块级元素，当页面内容比较少时，它的高度会小于默认浏览器的可是区域高度；html元素的高度是默认等于浏览器视窗的高度的从文档结构上来说 body是html的子元素，按道理设置body{ height:100%;},可以让它和html元素高度相等，实际发现没没效果。需要设置 html,body{height:100%}才能让两者的高度相等测试代码如下：...
复制链接

扫一扫