A parent div 定位绝对不占据其 children 的高度

Question

如标题所示，我有一个绝对定位的 parent div，我需要它定义的高度随其 child 元素的高度而扩展。 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 可见，parent 在浏览器中定义的高度与其 child 的高度不对应。这是我所指内容的屏幕截图。

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

感谢任何帮助！

Answer 1

清除修复

希望对你有帮助。

.parent2{
  background: red;
  position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 30%;
    height: 30%;
  clear: both;
  content: '';
  display:table;
}

Answer 2

<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>

.wrapper{
    height: 400px;
    width: 100%;
    background: #ddd;
    position: relative;
}
.parent2{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.child{
    color: #333;
    padding: 10px;
    background: #f5f5f5;
    margin: 40px;
}

<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. Curabit
    Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus susci.</p>
    </div>
  </div>
</div>

You Should Give Position: Relative To the Parent Div Of child Div Which one You Want to put as Absolute and Taking The 100% Height of This Parent Div Height.

.wrapper{
     position: relative;
}

By The Way, You Also Define The Fixed Height Of Your Parent Div, Like

.wrapper{
    height: 600px;
    position: relative;
}

Answer 3

首先确保你的绝对定位 parent2 div 有定位 context 通过设置 position:relative 到它的容器。

然后从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 的高度，你将需要一种替代技术，例如

A parent div 定位绝对不占据其 children 的高度

A parent div positioned absolutely not taking height of its children

html

css

absolute