Is it possible to make parent element (relative) fill the height of its absolute positioned content?

Question

I'd like my parent div to expand the height of the content, as my content will be dynamic. However, the content must be (I think) positioned absolutely so they can overlap each other vertically.

I've concluded I'll have to use JS to find the offset from the top to the bottom of the last element in the container, then set the height to that.

I'm currently doing something like this:

var lastElement = document.getElementById('three');
var bounds = lastElement.getBoundingClientRect();
var bottomOffset = bounds.top + $("#three").height();
$("#container").height(bottomOffset);

However this is clunky within my application, and the application of the height is not instantaneous, leading to a sluggy site.

Is there a better way?

 var lastElement = document.getElementById('three'); var bounds = lastElement.getBoundingClientRect(); var bottomOffset = bounds.top + $("#three").height(); $("#container").height(bottomOffset); 

 body, html { height: 100% padding: 0; margin: 0; } .absolute { display: inline-block; position: absolute; background-color: blue; width: 100px; height: 100px; } #two { top: 80px; left: 120px } #three { top: 160px; left: 240px; } #container { position: relative; width: 100%; ; background-color: yellow; ; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="absolute" id="one"></div> <div class="absolute" id="two"></div> <div class="absolute" id="three"></div> </div> 

View on JSFiddle

Answer 1

You can accomplish your result without any JS, but instead use CSS margin around the boxes to get the same result.

For the horizontal margin you can also use percentages (by request of OP).
For the vertical margins this will give unexpected results, since the percentage will still reference the width of the container (under "Property Values") , not the height .

 html,body {height:100%; padding:0; margin:0;} .container { background-color: yellow; } .box { display: inline-block; width: 100px; height: 100px; margin-right: 2%; background-color: blue; } .box.one {margin-top:0; margin-bottom:160px;} .box.two {margin-top:80px; margin-bottom:80px;} .box.three {margin-top:160px; margin-bottom:0;} 

 <div class="container"> <div class="box one"></div> <div class="box two"></div> <div class="box three"></div> </div> 

pixel-margin: https://jsfiddle.net/xzq64tsh/
percent-margin: https://jsfiddle.net/xzq64tsh/3/

Answer 2

Elements can overlap each other without the need of position absolute. You can for example use negative margin in order to create the overlap:

 body, html { height: 100% padding: 0; margin: 0; } #container > div { background-color: blue; width: 100px; height: 100px; } #two { margin-top:-50px; margin-left:50px; } #three { margin-top:-80px; margin-left:auto; margin-right:50px; } #container { position: relative; width: 100%; background-color: yellow; } 

 <div id="container"> <div id="one"></div> <div id="two"></div> <div id="three"></div> </div> 

Answer 3

Perhaps taking out the getBoundingClientRect() function, using jQuery instead might speed it up and simplify it a bit.

 var lastElement = $('#three'); var bottomOffset = lastElement.offset().top + lastElement.height(); $("#container").height(bottomOffset); 

 body, html { height: 100% padding: 0; margin: 0; } .absolute { display: inline-block; position: absolute; background-color: blue; width: 100px; height: 100px; } #two { top: 80px; left: 120px } #three { top: 160px; left: 240px; } #container { position: relative; width: 100%; ; background-color: yellow; ; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="absolute" id="one"></div> <div class="absolute" id="two"></div> <div class="absolute" id="three"></div> </div>