CSS Div高度100%且根据内容自适应

在本文中，我们将介绍如何在CSS中设置Div的高度为100%并根据内容自适应的方法。

阅读更多：CSS 教程

使用CSS设置Div高度为100%

要设置Div的高度为100%，我们需要先确保其父元素也具有相应的高度。如果父元素的高度未设置或为auto，则Div的高度将默认为内容的高度。

下面是一个例子，展示了如何实现Div高度100%并自适应内容：

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  background-color: lightgray;
}

.content {
  background-color: white;
  padding: 20px;
}
</style>
</head>
<body>
  <div class="container">
    <div class="content">
      <h1>这是一个标题</h1>
      <p>这是一段内容。</p>
    </div>
  </div>
</body>
</html>

在这个例子中，我们设置了html和body元素的高度为100%。然后，我们在一个名为container的Div中设置了高度为100%。最后，我们在container的内部创建了一个content Div，其中包含一些内容。

你可以看到，content Div的高度将自动根据内容调整，而container Div则会根据父元素的高度进行调整。

使用Flexbox实现Div的自适应高度

除了使用传统的高度设置之外，我们还可以使用Flexbox布局来实现Div的自适应高度。

以下是一个使用Flexbox的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置Div的高度为浏览器视口高度 */
}

.content {
  flex-grow: 1; /* 设置内容Div在高度上自动扩展 */
  background-color: lightgray;
}

.footer {
  background-color: lightblue;
}
</style>
</head>
<body>
  <div class="container">
    <div class="content">
      <h1>这是一个标题</h1>
      <p>这是一段内容。</p>
    </div>
    <div class="footer">
      <p>页脚内容</p>
    </div>
  </div>
</body>
</html>