在这里，我们将给大家分享关于css–MinHeight和ScrollingDivs的知识，让您更了解cssmin-height的本质，同时也会涉及到如何更有效地(document).height()和

在这里，我们将给大家分享关于css – Min Height和Scrolling Divs的知识，让您更了解css min-height的本质，同时也会涉及到如何更有效地(document).height()和$(window).height()、scrollTop、clientHeight scrollHeight offsetHeight、clientHeight,offsetHeight,scrollHeight迷一样的三个值、clientHeight—scrollHeight—offsetHeight 三者的区别的内容。

• css – Min Height和Scrolling Divs（css min-height）
• (document).height()和$(window).height()、scrollTop
• clientHeight scrollHeight offsetHeight
• clientHeight,offsetHeight,scrollHeight迷一样的三个值
• clientHeight—scrollHeight—offsetHeight 三者的区别

css – Min Height和Scrolling Divs（css min-height）

<div id="containter">

<div id="leftDiv"https://www.jb51.cc/tag/dis/" target="_blank">display:inline-block; overflow-y:scroll">
     List of Content
</div>

<div id="rightDiv"https://www.jb51.cc/tag/dis/" target="_blank">display:inline-block; min-height:500px; vertical-align:top">
     Some expanding information
</div>

</div>

(document).height()和$(window).height()、scrollTop

jQuery(window).height()代表了当前可见区域的大小

jQuery(document).height()则代表了整个文档的高度，可视具体情况使用

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离 ，在chrome里面试了下，与$(window).scrollTop()得到的值相同

$(document).scrollLeft() 这是获取水平滚动条的距离

要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了

要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了

$(document).height() //是获取整个页面的高度

$(window).height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 

clientHeight scrollHeight offsetHeight

<div  ></div>

对于上面的div，它的border的height有多高？答案是200+10*2+1*2=222。

直接上结论：
在style或css样式中的 height:200px  指的是内容可视区的高度，不含内边距，不含border，不含外边距，而不是div的高度。

以下结论在 firefox、chrome、IE10+、QQ浏览器中都测试过，都是一致的：

clientHeight: 可理解为内部可视区高度，样式的height+上下padding(本例即220）。

scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

offsetHeight:可理解为div的可视高度，样式的height+上下padding+上下border-width。（本例是222）

height 这个变量在几个浏览器中都是undefined

style.height这个变量在本例中是''200px''，不过遗憾的是只有将高度定义在元素的style属性中这个变量才有效，如果是抽取到了样式表中是无法取到的。

clientTop: 容器内部相对于容器本身的top偏移，实际就是 上border-width （本例是1）

scrollTop: Y轴的滚动条没有，或滚到最上时，是0；y轴的滚动条滚到最下时是 scrollHeight-clientHeight（很好理解）

offsetTop: 可以理解为容器相对于document的top的绝对偏移。等于top+margin-top

滚动时通常我们只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight  是正常的滚动距离，否则就是滚动过头了（手机上的上下拉取）！

clientHeight,offsetHeight,scrollHeight迷一样的三个值

https://blog.csdn.net/qq_39083004/article/details/78498178

https://www.imooc.com/article/17571  推荐

offsetLeft

一个元素的offsetLeft值，就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离

 什么是offsetParent对象？

 每一个元素，天生都有一个属性，叫做offsetParent，表示自己的“偏移参考盒子”，我们不称呼中文，就叫offsetParent。这个offsetParent是谁呢？

就是自己祖先元素中，离自己最近的已经定位的元素，如果自己的祖先元素中，没有任何盒子进行了定位，那么offsetParent对象就是body。

 op.offsetParent    

无论这个盒子自己是否定位，自己的offsetParent就是按照上述方法寻找。

 总结：

　　var w = document.documentElement.offsetWidth || document.body.offsetWidth;
    var h = document.documentElement.offsetHeight || document.body.offsetHeight;