Js中的各种高度问题

一、屏幕宽高相关

　　屏幕高度就是你的整个屏幕高度（开机会亮的那片区域的高度），相关的其他高度划分很简单，就是以任务栏为分界线从而分为两部分。　　　

　　screen.height ：屏幕高度。

　　screen.width ：屏幕宽度。

　　screen.availHeight ：屏幕可用高度。即屏幕高度减去上下任务栏后的高度。

　　screen.availWidth ：屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度。

二、浏览器宽高相关

　　浏览器高度就是你能看到的浏览器高度（如果你改变浏览器窗口大小，下边获取的值也会改变），相关的其他高度由工具栏为两部分。　　　

　　window.outerHeight ：浏览器高度。

　　window.outerWidth ：浏览器宽度。

　　window.innerHeight ：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

　　window.innerWidth ：浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

　　工具栏高/宽度 ：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。

 三、页面宽高相关

　　文档宽高这一块内容很多也很杂，这里先从基础的clientWidth、clientHeight、offsetWidth、offsetHeight说起。

　　 clientWidth与clientHeight：返回元素的宽度或高度（padding+content）。

　　offsetWidth与offsetHeight：返回元素的宽度或高度（padding+content+border）。

　　scrollWidth与clientWidth：返回元素的宽度或高度（padding+content）。

　　document.documentElement.clientWidth;        视口大小，不包括滚动条
       document.documentElement.clientHeight;   视口大小，不包括滚动条
       document.documentElement.offsetWidth;    视口大小，不包括滚动条
       document.documentElement.offsetHeight;        文档大小
       document.body.clientWidth;    视口大小，不包括滚动条
       document.body.clientHeight;文档大小
       document.body.offsetWidth;文档大小
       document.body.offsetHeight;文档大小

　　var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);

　　var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

　　关于这块的东西实在过于混乱，网上虽有众多博客讲解，但本人在测试时发现这些博客准确度并不高，限于本人能力有限，尚且无法总结出规律，这里就贴出几篇对我帮助比较大的博客地址。

　　JavaScript中的各种宽高总结（https://www.cnblogs.com/lcr-smg/p/10075220.html）

　　js中的各种宽高以及位置总结（https://www.cnblogs.com/w-yh/p/12060499.html）

　　clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案（https://www.cnblogs.com/nanshanlaoyao/p/5964730.html）

　　再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth（https://www.cnblogs.com/lidabo/archive/2012/04/27/2473084.html）（这篇文章道出了混乱的原因）

Js中的各种高度问题

原文：https://www.cnblogs.com/liuguo/p/12913700.html