height: 100% 无效问题

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

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

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

原文地址:https://www.cnblogs.com/jiumengmeng/p/7732177.html