<p style="text-align:center;font: bold 40px/80px Times New Roman,sans-serif;background-color:#FFFACD;">Js中的各种高度</p>
<h2 style="font-height:50px;background-color:#00868B;color:white;">1.屏幕：</h2>
1 //屏幕总高度
2 screen . height
3 //屏幕去除任务栏高度
4 screen . availHeight
5 //任务栏高度
6 var taskbarHeight = screen . height - screen . availHeight
<h2 style="font-height:50px;background-color:#00868B;color:white;">2.浏览器：</h2>
1 //整个浏览器高度(包括标签和水平滚动条的高度)
2 window . outerHeight
3 //页面可用高度（去除浏览器工具栏的高度）
4 window . innerHeight
5 var browserTaskBarHeight = window . outerHeight - window . innerHeight //浏览器工具栏高度
<h2 style="font-height:50px;background-color:#00868B;color:white;">3.Body：</h2>
会有兼容性问题
<p style="color:red;background-color:yellow;font-weight:bold;">body根据HTML的文档渲染模式不同指定的body也不同。</p>
1 //标准模式时(chrome firefox等)
2 ( document . compatMode == 'CSS1Compat' ) ，body = document . documentElement
3 //判断：
4 var body = document . compatMode == 'CSS1Compat' ? document . documentElement : document . body ;
5
6
7 //Body展示高度(去掉水平滚动条和浏览器工具栏的高度)：
8 body . clientHeight
9 //Body总高度（不包括滚动条）
10 body . offsetHeight
11 //滚动条高度
12 var scollbarHeight = window . innerHeight - body . clientHeight
<h2 style="font-height:50px;background-color:#00868B;color:white;">汇总图：</h2>
参考博客：https://www.cnblogs.com/polk6/p/5051935.html
