Css: Fit Relative Positioned Parent to Height of Absolute Positioned Child

CSS: fit relative positioned parent to height of absolute positioned child

Absolutely-positioned items are logically-associated with their parent, but not "physically". They're not part of the layout, so the parent item can't really see how big they are. You need to code the size yourself, or sniff it with JavaScript and set it at run-time.

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>

Expand relative positioned parent to height of absolute child

The problem you're having comes from your use of floats and position absolute. Both of which were never intended for this type of layout and are no longer best practice.

I've rewritten your demo below to use display:inline-block which also wasn't intended for this sort of layout but it is a better solution for this type of problem and is current best practice.

DEMO: http://jsbin.com/efEGukar/4/edit?output

The flexbox set of properties are specifically designed for this sort of layout and are a vastly better solution that will give you more control on how your site reacts to varying screen sizes. However, browsers are still adding support and it's not widespread just yet: see the current list here. This is future best practice, so if you're learning CSS take this approach.

Here is a good explanation of how to use flexbox.

---

Related Topics