Question

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

即使div是可见的，浏览器中父级定义的高度也不会与其子级的高度相对应。这是我所指的屏幕截图。

我尝试这样做的原因是我可以使用弹性框来匹配parent1和parent2 div的高度。但是，如果没有父母1取得孩子的身高，我就无法做到这一点。

感谢任何帮助！

Answer 1

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

你应该给位置：相对于父Div的父Div 哪一个你想要作为绝对和采取100％的高度这个父级高度。

.wrapper{
     position: relative;
}

通过这种方式，你还定义了你的父Div的固定高度，比如

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

Answer 2

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

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

请注意，由于定位，包装器不会考虑parent2 div的高度。如果您想要均衡parent1和parent2的高度，则需要使用其他技术，例如Create a row of flexbox items with a max height defined by one child.

Answer 3

clearfix

希望它可以帮到你。

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

父母div绝对不会占据孩子的身高

3 个答案: