Daniel
Reputation: 53
How to set Position: relative parent's height according to it's Position: absolute children?
The html code inside dvReporte and the "style####" classes comes from a custom reports API and it is always different depending on the report, therefore I can't customize it to use "float" instead of "position: absolute".
The report used to overflow up and down, but by making dvReporte "position: relative;" i got the content to stay inside the parent div.
The problem is that dvReporte's height is 0, and according to my previous research you can't set it right with css when you use "position: absolute". Is there a way to get the total height of the parent div based on the height of all it's children?
HTML example:
<div id="dvReporte" style="position: relative;">
<div class="style0000" style="position: absolute; left: 268px; top: 24px; width: 281px; height: 19px; z-index: 0;">Artículos Deportivos 2000, S.A. de C.V.</div>
<div style="position: absolute; left: 24px; top: 72px; width: 768px; height: 15px; z-index: 1;">
<img src="Buffer_htm_images/T35020_Z100_0001.gif?rand=562" width="768" height="15" border="0" alt="">
</div>
<div class="style0001" style="position: absolute; left: 366px; top: 82px; width: 292px; height: 13px; z-index: 2; overflow: hidden;">
<div style="position: absolute; left: 102px; top: 0px; width: 190px;">Al 31/Dic./2020</div>
</div>
<div class="style0002" style="position: absolute; left: 324px; top: 47px; width: 169px; height: 26px; z-index: 3;">Balance General</div>
<div class="style0003" style="position: absolute; left: 106px; top: 100px; width: 600px; height: 13px; z-index: 4; overflow: hidden;"> A C T I V O</div>
<div class="style0004" style="position: absolute; left: 106px; top: 130px; width: 260px; height: 13px; z-index: 5; overflow: hidden;"> </div>
<div class="style0001" style="position: absolute; left: 106px; top: 145px; width: 600px; height: 13px; z-index: 6; overflow: hidden;">Circulante</div>
<div class="style0004" style="position: absolute; left: 106px; top: 160px; width: 260px; height: 13px; z-index: 7; overflow: hidden;">CAJA</div>
<div class="style0004" style="position: absolute; left: 366px; top: 160px; width: 98px; height: 13px; z-index: 8; overflow: hidden;">
<div style="position: absolute; left: 54px; top: 0px; width: 44px;">1,001.00</div>
</div>
<div class="style0004" style="position: absolute; left: 106px; top: 175px; width: 260px; height: 13px; z-index: 9; overflow: hidden;">BANCOS1</div>
<div class="style0004" style="position: absolute; left: 366px; top: 175px; width: 98px; height: 13px; z-index: 10; overflow: hidden;">
<div style="position: absolute; left: 42px; top: 0px; width: 56px;">154,190.03</div>
</div>
<div class="style0004" style="position: absolute; left: 106px; top: 190px; width: 260px; height: 13px; z-index: 11; overflow: hidden;">Bancos2</div>
<div class="style0004" style="position: absolute; left: 366px; top: 190px; width: 98px; height: 13px; z-index: 12; overflow: hidden;">
<div style="position: absolute; left: 48px; top: 0px; width: 50px;">22,829.97</div>
</div>
<div class="style0001" style="position: absolute; left: 106px; top: 205px; width: 260px; height: 13px; z-index: 13; overflow: hidden;">Totales de Bancos</div>
<div class="style0001" style="position: absolute; left: 366px; top: 205px; width: 98px; height: 13px; z-index: 14; overflow: hidden;">
<div style="position: absolute; left: 36px; top: 0px; width: 62px;">178,021.00</div>
</div>
</div>
CSS example:
.style0000 {font-family: Tahoma, Geneva, sans-serif; font-size: 12pt; white-space: nowrap;}
.style0001 {font-family: Tahoma, Geneva, sans-serif; font-size: 8pt; font-weight: bold; white-space: nowrap;}
.style0002 {font-family: Tahoma, Geneva, sans-serif; font-size: 16pt; font-weight: bold; white-space: nowrap;}
.style0003 {font-family: Tahoma, Geneva, sans-serif; font-size: 8pt; font-weight: bold; text-decoration: underline; white-space: nowrap;}
.style0004 {font-family: Tahoma, Geneva, sans-serif; font-size: 8pt; white-space: nowrap;}
.style0005 {font-family: Tahoma, Geneva, sans-serif; font-size: 7pt; white-space: nowrap;}
Thanks for your time.
Report example, with its height set manually:
Upvotes: 1
Views: 892
Answers (1)
michaelward82
Reputation: 4736
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>Upvotes: 3
Related Questions
- Increase element's parent height (relative position) based on child's height (absolute position)
- Make parent div height according to children absolute div
- CSS relative positioning height to relative parent
- Parent height based on relative positioned children
- Make parents height to 100% of absolutely positioned child
- How to set parent div's height as child div with position: absolute
- Alternative to absolute positioning that updates parents height
- How can I set the height of a relative positioned element inside absolute positioned element?
- Find the height of absolutely positioned child element and setting it's height to its parent
- Respect height of absolute elements inside a relative element