首页 > div的clientheight和body的clientheight怎么理解不同

div的clientheight和body的clientheight怎么理解不同

html==========

 <body>
<div id="div1">12312312123121231212312<br>1231212<br>31212312123121<br><br>2312123121231<br><br><br>21231212<br><br>312123<br><br>1212312123121231212312123<br><br><br><br></div>
<br><br><br><br><br><br>    
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

css================

#div1{overflow:scroll;width: 100px;height: 100px;border: 1px solid #000;}

js======================

var div=document.getElementById('div1');
alert(div.clientHeight);    //86
alert(div.scrollHeight);     //276
alert(document.body.clientHeight);    //1390
alert(document.body.scrollHeight);    //1410

为什么div.clientHeight不能取到滚动条之后的高度,document.body.clientHeight可以取到滚动条之后的高度?


div.clientHeight取到的是div可视内容的高度。
document.body.clientHeight取到的是body对象高度。


document.body、document.documentElement和window获取视窗大小的区别 client*是获取对象的可视大小,返回的值不包括滚动条的大小,也不包括边框


其实是这样的,你的body并没有设置overflow 所以它的client的高看起来就像你说的包含滚动条的高。即使给body设置了overflow,也会应用到html上,详情请看 http://blog.aijc.net/css/2014/08/11/CSS%20%E5%8F%AF%E8%A7%86%E5%8C%96%... 中的overflow。你取html的clientHeight就是不包含滚动条的了。

【热门文章】
【热门文章】