How to adjust relative div height with respect to inner absolute height?

Question

For example: http://jsfiddle.net/MYvYy/182/

I have a lot of 'inner_box' elements inside of 'outer_box'. Inner_box elements a absolute.

I would like to adjust the outer_box height so that all inner_box elements fit in the outer_box.

I know it can be done with js. But I don't really like adjusting style with scripts.

So I was wondering if it is possible to be done using CSS?

Stepha

CSS - relative positioned parent div not stretching to absolute child div height – Bartender

empty your mind be formless shapeless like water, water can flow or it can crash be water my friend ;) It fixed my problem – Ufa

Answer 1

It's not possible with CSS alone.

Layout flow:

An element with position:absolute is outside of the layout flow of the rest of the page. As far as the relative parent is concerned, the absolute child occupies no space in the layout.

This is very useful if you need to have a pop-up or a nav menu nested inside a container, because it won't affect the layout of the container. That's the sort of use case that position:absolute is well-suited for.

Fixed height:

If you need absolute content to behave as if it's a part of the layout flow, use fixed height. Give the relative parent and the absolute child a fixed height, and avoid placing any variable-height child elements before the absolute child. If variable-height content does precede it, use a relative placeholder div with a fixed height at the location where the absolute child needs to appear.

If position:absolute has to be used and fixed height is not an option, use JavaScript.

Footslog

Answer 2

I have some workaround for this problem, it may not fit your situation but consider looking at it.
First of all we need to duplicate all absolute positioned div which you want to make the parent extend to its height. So your HTML will look like this.

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box ghost">1</div>
</div>

Then we need to add the "ghost div" CSS like so:

.inner_box.ghost{
    visibility: hidden;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
}

Conceit

This works perfectly for me. Could someone explain the theory behind this – Bedaub

@ShabinMuhammed The css of visibility: hidden only hides the content, the height and width are still available. Unlike display: none hides the element and removes height and width, but padding and margin are left. Heres a Fiddle – Ekaterinburg

best solution for OPs problem! – Redistrict

Answer 3

I only can provide you with Javscript fix for this using jQuery lib. let me know if you use it or not,

$('.outer_box').height($('.inner_box').outerHeight());

This line will fix the outer_box height

Imbecilic

As I said, I don't really need js. But thank you for your effort. – Stepha

Answer 4

I have tried the Fixed height method, but on small screens it is overlapping. So I have solved this problem by setting overlay background layer to seperate division and content to another division.

<div style="position:relative; background-color: blue; background-image:url('banner.png'); background-size:cover; background-position: center top;">
    <div style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#00000099;"></div>
    <div style="position:relative;z-index:2;"><h1 style="color:#fff;">Hello</h1></div>
</div>

I have uploaded the code on Codepen: https://codepen.io/shahbaz8x/pen/GRjEBze

Fondue

Answer 5

I fixed it by changing the position property of div.inner_box into

position:relative

if this is not what you'r looking for, or this didn't fix it, then you will have to use Javascript.

Imbecilic