父 div 的位置绝对不占用其子项的高度

Question

As the title suggests, I have a parent div that is positioned absolutely and I need its defined height to expand with the height of its child elements. Is this possible with css?

Here's a codepen of what I mean 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>

Even though the div is visible, the parent's defined height in the browser does not correspond to the height of its child. Here's a screenshot of what I'm referring to.

The reason I'm trying to do this is so I can maybe use a flex box to match the height of parent1 and parent2 divs. But I can't achieve this without parent1 taking the height of its children.

Any help is appreciated!

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>

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 2

Firstly make sure that your absolutely positioned parent2 div has a positioning context by setting position:relative to it's container.

Then remove the bottom:0 from parent2 and it will adjust its height to the content.

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

Note that due to the positioning, the wrapper will NOT take the height of the parent2 div into account. If you want to equalise heights of parent1 and parent2 you will need an alternate technique such as Create a row of flexbox items with a max height defined by one child.

Answer 3

clearfix

hope it helps you.

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