CSS 子级div高度自适应父级高度到100%

在本文中，我们将介绍如何使用CSS将子级div的高度设置为100％，同时使父级div的高度自适应。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

理解CSS盒模型

在开始介绍CSS中子级div的高度自适应父级div高度的方法之前，我们需要先了解CSS盒模型的概念。CSS盒模型用于描述元素在页面中占据的空间。每个元素都会被表示为一个矩形盒子，并且包含内容区域、内边距、边框和外边距。

CSS盒模型的四个部分如下：
1. 内容区域（content）：盛放元素实际内容的区域，比如文本、图片等。
2. 内边距（padding）：内容区域与边框之间的空间。
3. 边框（border）：内容区域与外边距之间的边界线。
4. 外边距（margin）：边框与其他元素之间的空间。

设置子级div高度为100％

要将子级div的高度设置为父级div的100％，可以使用CSS中的height属性。但是，这种方法只有在父级div的高度也是已知的情况下才有效。否则，子级div的高度将无法自适应。

以下是一个示例代码：

<div class="parent">
   <div class="child">
   </div>
</div>

<style>
.parent {
   height: 300px;
   border: 1px solid black;
   position: relative;
}

.child {
   height: 100%;
   background-color: lightblue;
}
</style>

在上述代码中，我们设置了父级div的高度为300像素，并且为其添加了一个黑色的边框。子级div的高度属性被设置为100％，这意味着它的高度将与父级div的高度相等。此外，我们还为子级div设置了浅蓝色的背景颜色，以便更清楚地看到效果。

运行上述代码后，我们可以看到子级div的高度已经自适应父级div的高度，并且填满了整个父级div。

设置父级div高度自适应

有时，我们需要让父级div的高度自适应其内容的高度。这可以通过使用CSS中的display属性和overflow属性来实现。

以下是一个示例代码：

<div class="parent">
   <div class="child">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Nullam euismod nunc vel aliquam efficitur.</p>
   </div>
</div>

<style>
.parent {
   border: 1px solid black;
   display: inline-block;
   overflow: auto;
}

.child {
   height: 100%;
   background-color: lightblue;
}
</style>

在上述代码中，我们设置了父级div的display属性为inline-block，这将使其高度自适应内容的高度。我们还设置了父级div的overflow属性为auto，这可以防止内容溢出父级div。

运行上述代码后，我们可以看到父级div的高度已经自适应子级div的内容高度，并且可以滚动查看所有内容。

支持动态内容的高度自适应

如果我们要实现的子级div的高度需适应动态内容，并且不知道父级div的高度，那么上述的方法将无法满足需求。在这种情况下，我们可以使用CSS中的flexbox布局来解决问题。

以下是一个示例代码：

<div class="parent">
   <div class="child">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Nullam euismod nunc vel aliquam efficitur.</p>
   </div>
</div>

<style>
.parent {
   border: 1px solid black;
   display: flex;
   flex-direction: column;
}

.child {
   flex: 1;
   background-color: lightblue;
}
</style>

在上述代码中，我们设置了父级div的display属性为flex，这将启用flexbox布局。我们还设置了父级div的flex-direction属性为column，这将使子级div按照纵向排列。子级div的flex属性被设置为1，这将使其在垂直方向上占据剩余的空间。

运行上述代码后，我们可以看到子级div的高度已经自适应其内容，并且父级div的高度也会自适应。