html - 父 div 定位绝对不占其子项的高度

Question

正如标题所暗示的，我有一个绝对定位的父 div，我需要它定义的高度随着它的子元素的高度而扩展。这可以用 css 实现吗？

这是我的意思的代码笔 https://codepen.io/SeanPeterson/pen/paKqBg

.wrapper {
  background: blue;
  widht: 100%;
  height: 100%;
}

.parent1 {
  width: 100%;
  min-height: 500px;
  background: blue;
}

.parent2 {
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 30%;
}

.child {
  background: green;
}

<div class="wrapper">
    <div class="parent1">

    </div>
    <div class="parent2">
        <div class="child">
            <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non
                nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in,
                elementum id enim. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus.
                Proin eget tortor risus.

                Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
                Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
                Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie
                malesuada.

                Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
                a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et,
                porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
                amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.Donec rutrum congue leo eget malesuada.
                Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis
                ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget
                malesuada. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.

                Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
                Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
                Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie
                malesuada.

                Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
                a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et,
                porttitor at sem. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
                amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
        </div>
    </div>
</div>

即使 div 可见，父元素在浏览器中定义的高度与其子元素的高度不对应。这是我所指内容的屏幕截图。

我尝试这样做的原因是我可以使用 flexbox 来匹配 parent1 和 parent2 div 的高度。但是，如果没有 parent1 占据其 child 的高度，我将无法实现这一目标。

感谢任何帮助!

Answer 1

首先，通过将 position:relative 设置为其容器，确保绝对定位的 parent2 div 具有定位 context。

然后从 parent2 中删除 bottom:0 ，它会根据内容调整其高度。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.wrapper {
  background: blue;
  height: 100%;
}

.parent1 {
  width: 100%;
  min-height: 500px;
  background: blue;
}

.parent2 {
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 30%;
}

.child {
  background: green;
}

<div class="wrapper">
  <div class="parent1">

  </div>
  <div class="parent2">
    <div class="child">
      <p>Donec rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget
        malesuada. Pellentesque in ipsum id orci porta dapibus.</p>
    </div>
  </div>
</div>

请注意，由于定位原因，包装器不会考虑 parent2 div 的高度。如果你想使 parent1 和 parent2 的高度相等，你将需要一种替代技术，例如 Create a row of flexbox items with a max height defined by one child.