【CSS】width 和 height 100%

有时你对一个元素设置了 style="height: 100%"，但发现并没有达到预想的效果。造成这种现象的原因可能是它的直接父元素尺寸不确定造成的。

<div id="a" style="height: 40px; background: #0ff">
<div id="b" style="background: red;">
<div id="c" style="height:100%;background:pink;">id=c</div>
</div>
</div>

也许你希望 c 的高度撑满 a，但实际却没有。通常，div 的高度默认是根据内容自适应的，所以 b 的高度将由 a 的高度决定，然后 b 又根据 a 的高度设置了 100%，相当于 b 根据自己的内容自适应。 与 position 不同，如果当前元素的 parent 没有定义 position 或 position: static，将继续向上寻找，直到找到一个非 static 的元素 E 后，根据 E 定位。width 或 height 只由 直接父元素 决定（因 position 、float 等特殊样式打破布局暂不考虑）。
解决方法，使 parent 的高度不由子元素决定，如为其设置具体高度数值，或使其根据其他明确高度的元素改变。
常见的使用：撑满浏览器可视区域，只为 body 下的第一个块级元素设置 height: 100% 是无效的，只有对 html、body 都设置了 100% 才达到效果。