CODEWITHSUNDEEP
css
user502014
user502014

Reputation: 2331

Expand a div to bottom of its parent container

I have a div #parent which has a min-height:400px;

This div contains 2 child divs, the last of which I want to expand down to the bottom of its parent, despite the amount of content inside of it.

The height of parent is fluid as content can be a lot or very small.

<div id="parent">
     <div id="child1"><!-- content here --> </div>
     <div id="child2><!-- this div should stretch down to bottom of parent container--></div>
</div>

#parent{min-height:400px;}

Is this at all possible - I can't use any js hacks

Upvotes: 4

Views: 4505

Answers (2)

betamax
betamax

Reputation: 14061

EDIT: Sorry, this doesn't actually work - the bottom div doesn't expand to fit the content: https://i.sstatic.net/pQpFk.png

As long as #child1 has a fixed height, this is possible. So, you have:

<div id="parent">
     <div id="child1">&nbsp;</div>
     <div id="child2">&nbsp;</div>
</div>

And then the CSS you use is:

#parent {
    min-height:200px;
    height:300px;
    position:relative;
    width:100%;
}
#child1 {
    position:absolute;
    height:50px;
    top:0;
    left:0;
    width:100%;
    background-color:blue;
}
#child2 {
    position:absolute;
    top:50px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:red;
}

See example here: http://jsfiddle.net/U8VdV/

If #child1 cannot have a fixed height then you are out of luck.

Upvotes: 2

Zoidberg
Zoidberg

Reputation: 10333

This is very tricky to do with just CSS. It is possible, but it gets ugly, instead, when I need to do this, I use the YUI Layout Manager. I am sure JQUERY also has something similar as well. But I find this the easiest and most bug free way to do what your asking.

Upvotes: 0

Related Questions