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

user_870853 0
Viewed 44458

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?

css-position css html
5 Answers

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

user_63060540
Related