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;
.
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction
- 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.
.parent { background: #AAA;}
.child { position: absolute;}
.child-hidden { visibility: hidden;}
<div class="parent"> <img class="child" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png"> <img class="child-hidden" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png"></div>
Related Topics
Regular Expression For Extracting Tag Attributes
Using CSS :Before and :After Pseudo-Elements With Inline Css
How to Remove the Gutter (Spacing) Between Columns in Bootstrap
Adding HTML Class Tag Under ≪Option≫ in Html.Dropdownlist
How to Disable Google Translate from HTML in Chrome
How to Create a Curve Between Two Gradient Using CSS
Font Rendering/Line-Height Issue on MAC/Pc (Outside of Element)
How to Show Split Header in the Material Table Having Nested Group of Data in Angular
Format HTML Table Cell So That Excel Formats as Text
Is Anything Except Li's Allowed in a Ul
Embed Image in a ≪Button≫ Element
Displaying Unicode Symbols in Html
Why Top Margin of HTML Element Is Ignored After Floated Element
Make an HTML Svg Object Also a Clickable Link
<Input Type="Number"> Not Working in Ie10