关于height:100%失效的解决

我们在设置width:100%时可以横向占满全屏，但是设置height:100%确没有任何作用，举个例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>        
        #d1{
            width: 100% ;
            height:100%;
            background: #4cd964;
        }
    </style>
</head>
<body>
<div id="d1">我是高度100%</div>
</body>
</html>

效果图如下：

关于height:100%失效的解决

如果高度起作用的话，背景色应该占满全屏，而现在只是内容的高度。

原因如下：

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

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

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

解决方法：

html,body{
    height:100%;
    margin:0;
    padding:0;
}

为了使一个元素的height:100%起作用，需要让他的所有的父元素高度为100%。magin 和padding的作用是为了不出现滚动条。

效果图如下：

关于height:100%失效的解决