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

阅读更多：CSS 教程

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

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

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

以下是一个示例代码：

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

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

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

以下是一个示例代码：

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam euismod nunc vel aliquam efficitur.

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

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

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

以下是一个示例代码：

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam euismod nunc vel aliquam efficitur.

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

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

通过使用CSS的height属性和display属性，我们可以实现子级div的高度自适应父级div的高度。如果父级div的高度未知，可以使用display: flex和flex: 1来实现自适应。我们应根据情况选择合适的方法来满足需求，并注意调整其他样式以获得期望的效果。