div设置height:100%;无效的原因

最新推荐文章于 2024-09-13 15:14:40 发布

转载最新推荐文章于 2024-09-13 15:14:40 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2306318/blog/1552928

文章标签：

#python

本文详细解析了CSS中使用百分比设置元素高度的原理及注意事项。通过实例演示如何正确设置html和body的高度以实现期望的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

有时我们会困惑为什么设置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>