height: 100% 无效问题

当设置一个元素（非行内）width: 100% 时，这个元素的宽度会占满整个浏览器窗口的可视区，但是如果设置高度为 100%的话会发现这个元素高度为零。这是为什么呢？

首先这个值是一个百分比，是相对于其他值的一个比值，一般来说，css高度的百分比都是相对其父元素的（宽度的百分比相对其祖先元素），只要向上追寻其父元素的高就可以了，如果其父元素中有高，就会占满其最近的父元素，如果没有的话呢，就会出现我们第一个疑问。宽是占满屏幕的，高却是0。

原因就是浏览器对于宽，是有一个缺省值，类似于默认参数一样的功能，这个值就是浏览器可视区的宽度；但是对于高确是没有的，所以这时候就要靠内容撑起来了，如果没有内容，高就会为0，如果有内容，就会为内容的高度。

转载于:https://www.cnblogs.com/jiumengmeng/p/7732177.html