Auto Height on Parent Container with Absolute/Fixed Children

Auto height on parent container with Absolute/Fixed Children

The parent div can not use height:auto when its children are positioned absolute / fixed.

You would need to use JavaScript to achieve this.

An example in jQuery:

var biggestHeight = 0;
// Loop through elements children to find & set the biggest height
$(".container *").each(function(){
 // If this elements height is bigger than the biggestHeight
 if ($(this).height() > biggestHeight ) {
   // Set the biggestHeight to this Height
   biggestHeight = $(this).height();
 }
});

// Set the container height
$(".container").height(biggestHeight);

Working example
http://jsfiddle.net/blowsie/dPCky/1/

Make absolute positioned div expand parent div height

You answered the question by yourself: "I know that absolute positioned elements are removed from the flow, thus ignored by other elements." So you can't set the parents height according to an absolutely positioned element.

You either use fixed heights or you need to involve JS.

Update 2022: Nowadays one might use CSS flexbox[1] or grid[2] to reverse the visual order of HTML elements inside a parent container without using position: absolute;.

1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction
2. https://developer.mozilla.org/en-US/docs/Web/CSS/grid or
   Reverse order of columns in CSS Grid Layout

How to set parent div's height as child div with position: absolute

I don't think this is possible with CSS while keeping the children absolutely positioned.

Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.

If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.

var content=document.querySelector('.content');var container=document.querySelector('.container');
content.style.height=container.offsetHeight + 'px';

*{box-sizing:border-box;}
.content {  width: 100%;  max-width: 1160px;  margin: 0 auto;  /*padding: 120px 0;*//*Padding removed for example*/   border:5px solid green;}.container{  position: absolute;  overflow: hidden;  width: 100%;  border:2px solid red;  height:652px;}

<div class="content">  <div class="container">    some other elements whose height is 652px...  </div></div>

.parent {  width:100%;  background: #ff0000;  width:200px;  position: relative;}.parent:after {  content: '.';  color: transparent;  clear: right;  overflow: hidden;  display: block;  height: 0;}
.child {  float: right;  width:40px;  background: #ffff00;}

<div class="parent"><div class="child">    this is the child element to be displayed  </div>  Child is<br>   longer than<br>  parent content.</div><br><div class="parent"><div class="child">    child  </div>  Child is<br>   shorter than<br>  parent content.</div>