Position: Absolute and Parent Height

Position: absolute and parent height?

2022 UPDATE. This answer is nearly 10 years old. When it was written we didn't have layout technologies like Flex or Grid available (they were dark, hacky/fun times).

Thankfully things have massively improved. Jöcker's answer shows you how to achieve this layout with Grid. If you can live with not supporting legacy browsers, do that instead!


Original Answer

If I understand what you're trying to do correctly, then 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.

Alternatively, just use float: left/float:right and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden on the parent (or any other clearfix technique) to cause its height to expand to that of its children.

article {
position: relative;
overflow: hidden;
}

.one {
position: relative;
float: left;
margin-top: 10px;
margin-left: 10px;
background: red;
width: 30px;
height: 30px;
}

.two {
position: relative;
float: right;
margin-top: 10px;
margin-right: 10px;
background: blue;
width: 30px;
height: 30px;
}

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 Position: relative parent's height according to it's Position: absolute children?

There's no way to to do what you are asking when using CSS and absolute positioning in this manner.

You could try using javascript to set the height of the containing element:

// Gets containing div
const parent = document.querySelector('#dvReporte')
// Gets all children of containing div
const children = parent.children

// Stores the largest extent found (offsetTop + offsetHeight)
let largestExtent = 0

// iterate the children elements and store the largest extent found
for (var i = 0; i < children.length; i++) {
let extent = children[i].offsetHeight + children[i].offsetTop
if (extent > largestExtent) largestExtent = extent
}

// Set the height of the containing element, adds an extra 20px for padding at the bottom
parent.style.height = `${largestExtent + 20}px`

https://codepen.io/mward-sudo/pen/abWExya?editors=1111


I understand the outputting tool is your problem, but for reference, the code in this report should properly be done using a table to do the majority of the layout, like below.

.wrapper {
font-family: Tahoma, Geneva, sans-serif;
border: 1px solid black;
padding: 1em;
width: 60em;
margin: 1em auto
}



header {
text-align: right;
}

table {
margin: 0 auto;
}

.total {
text-decoration: underline;
}
<div class="wrapper">
<header>
<p>Artículos Deportivos 2000, S.A. de C.V.</p>
<h1>Balance General</h1>
<p class="date">Al 31/Dic./2020</p>
</header>

<table>
<thead>
<tr>
<th style="width: 20em; border-bottom: 1px solid black;">A C T I V O</th>
<th style="width: 7em;"></th>
<th style="width: 7em;"></th>
<th style="width: 7em;"></th>
</tr>
</thead>

<tbody>
<tr>
<td><strong>Circulante</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CAJA</td>
<td>1,001.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>BANCOS1</td>
<td>154,190.03</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Bancos2</td>
<td>22,829.97</td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Totales de Bancos</strong></td>
<td><strong>178,021.00</strong></td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>etc.</strong></td>
<td></td>
<td><strong>-0.00</strong></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="total"><strong>1,000,000</strong></td>
</tr>
</tbody>
</table>
</div>

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>

Absolute positioning child and parent height is 0

As I mentioned in the comments, you could perhaps add two <img> elements. One with position: absolute - as your application requires, and another one with visibility: hidden but with position: relative.

If you don't want to mess about with the markup, you could do something similar with pseudo-elements, such as :after or :before. But the idea is the same.

The parent now takes up the full height of your image. This solution may or may not work depending on your application, which isn't very clear in your question, but perhaps it's worth a try.