CSS 父容器中使用绝对/固定定位的子元素的自动高度

在本文中，我们将介绍如何使用CSS来实现在父容器中使用绝对或固定定位的子元素时，自动调整父容器高度的方法。

阅读更多：CSS 教程

什么是绝对定位和固定定位

在CSS中，我们可以使用绝对定位或固定定位来控制元素的位置。绝对定位使元素脱离文档流，并根据其最近的非静态定位的祖先元素进行定位。固定定位则是相对于浏览器窗口进行定位，而不会随滚动而改变位置。

父容器高度问题

当我们在父容器中使用绝对定位或固定定位的子元素时，父容器的高度将不再随子元素的高度自动调整。这可能会导致父容器显示不完整的内容，影响页面布局。

下面是一个示例，通过绝对定位的子元素导致父容器无法自动调整高度的情况：

<div id="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

<style>
#parent {
  position: relative;
  background: yellow;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 200px;
  width: 200px;
}
</style>

在上面的示例中，父容器的背景为黄色，子元素的背景为红色，父容器无法自动调整高度，导致红色子元素超出父容器显示。

解决方法

为了解决父容器无法自动调整高度的问题，我们可以使用以下方法之一：

方法一：使用padding-bottom

我们可以为父容器添加一个padding-bottom的值，使其超过绝对定位的子元素的高度。这样可以保证父容器的高度足够容纳子元素，并且父容器的高度可以自动调整。

<div id="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

<style>
#parent {
  position: relative;
  background: yellow;
  padding-bottom: 200px; /* 子元素的高度 */
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 200px;
  width: 200px;
}
</style>

方法二：使用overflow属性

另一种解决方法是为父容器添加overflow: auto或overflow: hidden属性。这样可以使父容器包含绝对定位的子元素，并且父容器的高度可以自动调整。

<div id="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

<style>
#parent {
  position: relative;
  background: yellow;
  overflow: auto; /* 或者使用 overflow: hidden */
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 200px;
  width: 200px;
}
</style>

方法三：使用伪元素

还可以使用伪元素来为父容器添加一个占位符，使其高度与子元素一致，从而实现父容器的高度自动调整。

<div id="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

<style>
#parent {
  position: relative;
  background: yellow;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 200px;
  width: 200px;
}
#parent::after {
  content: "";
  display: block;
  height: 200px; /* 与子元素高度一致 */
}
</style>