'CSS, auto resize div?

I'm trying to design a layout with css, I got one main container(div) and two inner container(div_upper and div_lower). let say I want to resize div_upper and div_lower will automatically resize itself and both divs still fit in the main container. I'm sure this can be done in javascript, but is there any CSS to accomplish this? if so I would be glad.

csshtml


Solution 1:[1]

Another solution:

Use this class for getting auto vertical height - 

.getAutoHeight {
   position: relative;
   overflow: auto; /* edit by thobens: overflow: hidden seems to be better, as (at least) IE 8 shows always a disabled scrollbar with overflow: auto */
}

<div class="getAutoHeight ">
    any content<br />
    any content<br />
    any content<br />
    any content<br />
</div>

Solution 2:[2]

CSS3 resize:

.thisDiv {resize:both;}

Solution 3:[3]

you can use the flex option like the bottom:

<div class="container">
    <div class="upper"></div>
    <div class="lower"></div>
</div>

<style>
    .container
    {
        display:flex;
        flex-direction:column;
        height:300px;
    }
    .container .upper
    {
        height:10px;
    }
    .container .lower
    {
        flex-grow:1;
    }
</style>

Now lower heigh is '290px'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 thobens
Solution 2 sth
Solution 3 thisisnabi

Related Questions