【CSS系列】height:100%设置div的高度

时间 2021-08-13 标签 css html 浏览器 ide 布局 spa htm 对象 blog get

1、div设置百分百高度实现描述

在html布局中body内第一个div盒子对象设置100%高度height样式，是没法成功显示100%高度的。这个是由于body高度默认值为自适应的，因此及时设置body第一个布局div高度为百分比也是无效的，由于div解析上级高度为0，天然div height 100%实际高度也为0。css

浏览器根本就不计算内容的高度，除非内容超出了视窗范围(致使滚动条出现)。或者你给整个页面设置一个绝对高度。不然，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。html

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

若是想让一个元素的百分比css高度height: 100%;起做用，你须要给这个元素的全部父元素的高度设定一个有效值。ide

2、未实现div height 100%示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>未成功设置100%高度</title>
 6 </head>
 7 <body>
 8 <div style="height: 100%;background-color: #4d85d1">
 9     所在div设置高度100%
10 </div>
11 </body>
12 </html>

div有两个父元素html和body，若是想让div的百分比高度起做用的话就要为html和body设置高度布局

3、实现div高度100%的示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>成功设置100%高度</title>
 6     <style type="text/css">
 7         html,body{
 8             height: 100%;
 9         }
10     </style>
11 </head>
12 <body>
13 <div style="height: 100%;background-color: #4d85d1">
14     所在div设置高度100%
15 </div>
16 </body>
17 </html>

以上虽然实现了div的高度为100%，可是右侧出现了滚动条，这是由于body有必定的margin,也就是body默认有margin-top和margin-bottom因此设置100%高度以后body多余的margin值显示不完整，出现下拉滚动条，要想正确显示的话就要对body设置margin为0.spa

4、这是高度100%生效，去掉滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成功设置100%高度去除滚动条</title>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
        }
    </style>
</head>
<body>
<div style="height: 100%;background-color: #4d85d1">
    所在div设置高度100%
</div>
</body>
</html>

5、总结

要实现最外层div高度为100%（百分之百），关键对html和body要设置高度100%,若是只设置html和body标签其中一个高100%，也是没法实现body内第一个盒子高度100%的。但犹豫body默认有必定margin值，但设置body高度height 100%后，浏览器就会出现滚动条，因此能够对body设置margin为零，去除间距实现div height 100%也无滚动条效果。htm