网页高度计算及浏览器适配的理解

https://www.cnblogs.com/2050/p/3877280.html

网页上有  meta  name=viewport 标签，它的宽度表示屏幕能显示的css px 宽度，使用document.documentElement.clientWidth可以获取  ,通常将它设置成device-width可以使1px的css能在各个手机上展示的一样，

dev-width 部分手机可以通过 screen.width获取。viewport的默认width 一般很大，为了能桌面端的显示出来，一般设置为980px。

width 和 initial-scale 谁使viewport的宽度大就使用谁为viewport的宽， initial-scale 是相对于dev-width缩放。with=dev-width 和initial-scale=1 是相同的效果，initial-scale = dev-width/width

为了兼容 同时写上  width=dev-width  initial-scale=1 可以使所有的手机上1px表现出相似的物理的大小。

flexiable.js 是淘宝的js公共库，<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>  https://www.cnblogs.com/lyzg/p/5058356.html

其原理是给html设置一个font-size，然后添加一个drp属性，通过rem来进行适配。

如果你写了meta标签，width=device initial-scale 则，drp一直会是1, 不写会自动计算    

html和body的高度默认是被页面内容撑起的。document.body.clientHeight就是页面内容的实际高度，document.documentElement.clientHeight 是页面可视区域的高度可以认为是浏览器的高度。

设置body背景，如果body不足一个浏览器高度，body的背景也会显示成浏览器的背景

一个绝对定位的元素如果父元素无定位，则是相对于浏览器定位的。（以前一直以为是相对于html）

要想使一个按钮始终在页面底部，不论屏幕大小，横屏竖屏，只需将html设置为min-height:100%;position:relative; 然后这个按钮设置为position:absolute。在在页面底部加一个static的元素和这个按钮一样的高度。

页面的高度解析

获取页面滚动的高度：
document.documentElement.scrollTop + document.body.scrollTop
正常情况下写 document.documentElement.scollTop即可，据说在chorme上某个版本上有bug

还可以使用 window.pageYOffset 来获取，jquery上就是这么写的

jquery.fn.offset 其实就是 getBondingClientReact()（元素到视口的位置） 的top,left 然后加上 window.pageYOffset 展示的是元素都页面顶部的距离

ie7上 document.documentElement.offsetLeft 为2