CODEWITHSUNDEEP
csshtml
khousuylong
khousuylong

Reputation: 419

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.

Upvotes: 6

Views: 74562

Answers (4)

thisisnabi
thisisnabi

Reputation: 1220

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'

Upvotes: 0

paborito
paborito

Reputation: 21

CSS3 resize:

.thisDiv {resize:both;}

Upvotes: 2

Otabek
Otabek

Reputation: 71

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>

Upvotes: 7

RuudKok
RuudKok

Reputation: 5302

Maybe this blogpost on the A List Apart website will help you in the right directions.

Upvotes: 3

Related Questions