📌  相关文章
📜  反应 html 高度 100% - CSS (1)

📅  最后修改于: 2023-12-03 15:37:05.741000             🧑  作者: Mango

反应 HTML 高度 100% - CSS

HTML和CSS是网页布局和设计的基石。当我们在HTML中使用一个元素，它的高度默认是根据它的内容来调整的。有时候，为了让页面更美观或更符合设计要求，我们需要改变元素的高度为与父元素相同。这个需求通常可以通过设置元素的高度为100%来完成。

什么是高度100%？

将一个元素的高度设置为100%，实际上是将该元素的高度设置为其包含块（即其父元素）的高度。包含块是一个元素相对于其他元素进行定位和大小的基石。

如何设置高度100%？

在CSS中设置元素高度为100%可分为以下两种情况：

父元素已经定高的情况

当父元素已经设置了高度时，子元素的高度可以直接设置为100%。

例如，以下HTML代码和CSS样式会将div元素的高度设置为其父元素body的高度：

<body>
  <div class="full-height"></div>
</body>

.full-height {
  height: 100%;
}
父元素未定高的情况

如果父元素没有设置高度，则无法通过设置子元素高度为100%来改变高度。

这时候，需要将父元素的高度设置为100%。为此我们可以将父元素的高度设置为html和body的高度都是100%，然后再将子元素的高度设置为100%。

例如，以下HTML代码和CSS样式会将div元素的高度设置为html和body元素的高度：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
      }
      .full-height {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="full-height"></div>
  </body>
</html>
总结

将HTML元素的高度设置为100%时，实际上设置的是该元素的高度为其父元素的高度。如果父元素的高度未定，需要将HTML和body元素的高度均设置为100%。