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

最新推荐文章于 2024-11-01 15:19:31 发布

黄献新

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量459

点赞数 3

文章标签： html 前端 javascript css

本文链接：https://blog.csdn.net/wuxianjinbu/article/details/139819094

版权

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

<!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>