为啥你的height:100%不起作用？

  1、百分比宽高 的设定

  对于w3c中对width 与height的解释，可以明确%设定宽高是根据父级宽高来定的：

2、width：100%

随意写一段代码，设置一个背景颜色以便查看效果

    可以看到，宽度的100%很容易实现，但是height:100%就有点难，这是为什么呢？

3、浏览器是如何计算高度与宽度的

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽，会自动填满整个横向宽度，如下：

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。

即父元素的高度只是一个缺省值：height: auto;我们设置height：100%时，是要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

4、解决方法

%是一个相对父元素计算得来的高度，要想使他有效，我们需要设置父元素的height;

要特别注意的一点是，在之中的元素的父元素并不仅仅只是，还包括了。

所以我们要同时设置这两者的height，只设置其中一个是不行的：

这样就噢了。