1、按照w3c中的width和height属性，可以明确%设定宽高是根据父元素的宽高来的；
2、Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽，会自动填满整个横向宽度，因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。
解决方案：
html,body{
height: 100%;
margin: 0;
padding: 0;
}