CSS：在包含div上自动高度，背景div内100%高度

在本文中，我们将介绍如何在一个包含div上实现自动高度，并在包含div内的背景div上实现100%高度。

阅读更多：CSS 教程

自动高度的包含div

通常情况下，一个包含div会根据其内部内容的高度自动调整其高度。然而，当包含div内部有浮动元素时，包含div的高度将会坍缩为0，这样就无法正确显示其背景或者其他元素。为了解决这个问题，我们可以使用一些CSS技巧。

首先，我们可以在包含div上添加一个额外的伪元素，使用clear: both;来清除浮动的影响。这样可以确保包含div的高度能够正确地根据其内部内容的高度调整。

.container::after {
  content: "";
  display: table;
  clear: both;
}

接下来，我们可以使用display: flex;属性将包含div的子元素包裹在一个flex容器中。这样做可以解决包含div由于浮动元素导致的高度坍塌问题，并且可以自动调整高度以适应内部元素的高度。

.container {
  display: flex;
  flex-wrap: wrap; /* 如果需要换行的话 */
}

使用这两个技巧可以确保包含div的高度能够正确地根据其内部内容调整。接下来，我们将介绍如何在包含div内的背景div上实现100%高度。

100%高度的背景div

要在包含div内的背景div上实现100%高度，我们可以使用一些CSS技巧。

首先，我们可以在包含div上设置position: relative;来建立一个定位上下文。这样可以让背景div相对于包含div进行定位。

.container {
  position: relative;
}

然后，我们可以在背景div上设置position: absolute;和top: 0; bottom: 0;来使背景div的高度和包含div保持一致。这样背景div就可以填满包含div的高度。

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f2f2f2;
}

通过以上的CSS技巧，我们可以实现在包含div上自动高度，并在背景div内实现100%高度的效果。

下面是一个示例，演示了如何使用以上的CSS技巧来实现自动高度的包含div和100%高度的背景div。

<div class="container">
  <div class="content">
    <p>这是一个包含div的示例内容。</p>
    <p>这是一个更长的示例内容。</p>
    <p>这是一个更长的示例内容。</p>
  </div>
  <div class="background"></div>
</div>

.container::after {
  content: "";
  display: table;
  clear: both;
}

.container {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f2f2f2;
}

此示例中的包含div的高度将自动根据内容调整，并且背景div的高度将始终保持与包含div相等。