为什么CSS设置div的height:100%不管用

最新推荐文章于 2024-08-11 15:12:14 发布

把怪物藏起来

最新推荐文章于 2024-08-11 15:12:14 发布

阅读量8k

点赞数 3

分类专栏：前端内容文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_51929568/article/details/123126291

版权

前端内容专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细解释了为何div设置height:100%可能无效，并指导如何通过设置body和html高度来确保元素占据整个屏幕。关键步骤包括设置html和body的高度为100%，并理解百分比高度计算原理。

摘要由CSDN通过智能技术生成

原文链接：https://cloud.tencent.com/developer/article/1399131
有时我们会困惑为什么设置div的height:100%;没有效果，如下所示：

在这里插入图片描述

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

在这里插入图片描述

可见还是没有效果，原因跟上一个一样，其父元素也没有高度，所以我们来设置html的高度。
在这里插入图片描述

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

<!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填充完一个浏览器窗口。

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

在这里插入图片描述

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

但是子html的子元素的高度设置成百分比时，会按照html设置的高度值计算比例。（如下所示，html高度为1000px；所以body的高度为500px）。
在这里插入图片描述

对于body的设置的高度小于浏览器窗口时，同样会填充满整个浏览器窗口（可以设置背景测试），但是其子元素的高度设置成百分比时，会按照body设置的高度值来计算比例。
在这里插入图片描述
总结：height:100%是依据父元素来设置的，在body中的div的父元素是body，body并没有设置height，body的父元素是html，html也没有设置height，所以若想使div设置的height：100%占据整个浏览器窗口就要设置body和html的height为100%