关于height:100%失效的解决

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

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%失效的解决_第1张图片

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

原因如下:

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

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

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

解决方法:

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

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

效果图如下:

关于height:100%失效的解决_第2张图片

你可能感兴趣的:(关于height:100%失效的解决)