css设置height100%无效的问题
height:100%这个属性我们在很多地方都会用到，尤其是像让子元素占满父元素区域的时候，但是有时候会感觉好恶心，为啥设置了半天总是不生效。那么我们先来看一下对于高度属性的可能值：
| 值 | 描述 |
|---|---|
| auto | 默认。浏览器会计算出实际的高度。 |
| length | 使用 px、cm 等单位定义高度。 |
| inherit | 规定应该从父元素继承 height 属性的值。 |
| % | 基于包含它的块级对象的百分比高度。 |
所以使用百分比是否有效主要基于其父元素还得是块级元素的百分比高度。
<!DOCTYPE html>
<html>
<body>
<div style="height: 100%;">
https://www.oecom.cn
</div>
</body>
</html>
这是一段最基本的想要实现全屏，但是无效的案例，想要了解为什么这样设置无效，我们需要了解一下浏览器是如何计算宽度和高度的。
解析浏览器计算宽高方式
Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽，会自动填满整个横向宽度，当然前提是块级元素。
但是高度的计算方式和宽度就完全不一样了。而是浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就不会去考虑。
因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
用我们最开始的那个例子，我们可以看到如下图样子：
那么如果想让他生效怎么办，除非你给html、body都设置上height:100%;按父子元素层层设置。
解决方案
我们知道了使用百分比来显示高度是依据于其父元素的高度而来。前面我们说了一个很笨的方式就是按层级逐级设置，另一个方法就是直接将该元素的定位方式设置为absolute或者fixed。
<!DOCTYPE html>
<html>
<body>
<div style="position:absolute;top:0;left:0;width:100%;height: 100%;">
https://www.oecom.cn
</div>
</body>
</html>
实现原理就是让其脱离文档流，基于浏览器来定位宽高。
