div设置height:100%;无效的缘由

时间 2019-11-12 标签 div 设置 height 100% 100 无效缘由

有时咱们会困惑为何设置div的height:100%;没有效果，以下所示：html

要解决这个问题，先的知道设置height:100%的原理，当你让一个元素的高度设置为百分比高度时，是相对于父元素的高度根据百分比来计算高度。因此当父元素没有高度时，height:100%也就没有高度值，因此咱们来设置body高度。浏览器

可见仍是没有效果，缘由跟上一个同样，其父元素也没有高度，因此咱们来设置html的高度。测试

可见产生了咱们想要的效果。spa

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>测试height100%</title>
</head>
<style>
   *{
      padding: 0;
      margin: 0;
   }
   html{
      height: 100%;
   }
   body{
      height: 100%;
   }
   .wqh{
      height: 100%;
      background-color: royalblue;
   }
</style>
<body>
<div class="wqh"></div>
</body>
</html>

进阶

html 的父元素能够理解成window，浏览器会将html填充完一个浏览器窗口。htm

设置html的height为具体的像素值，当其值大于浏览器窗口时，浏览器出现滚动条，当其值小于浏览器窗口时，一样会将html填充完整个浏览器窗口（能够设置背景测试）。it

设置html的height为百分比时，当其值大于100%出现滚动条，当小于100%时一样会将html填充完整个浏览器窗口（能够设置背景测试）。class

可是子html的子元素的高度设置成百分比时，会按照html设置的高度值计算比例。（以下所示，html高度为1000px；因此body的高度为500px）。原理

对于body的设置的高度小于浏览器窗口时，一样会填充满整个浏览器窗口（能够设置背景测试），可是其子元素的高度设置成百分比时，会按照body设置的高度值来计算比例。进阶