Question

I have one containing div with two child divs.

All divs are the same width and children divs appear on top of each other; containing div’s height is 100% and the second child div’s height is fixed at 25px.

Without javascript, how do I make it so that the first child div’s height is the difference between the container div’s height (based on the 100%) and the second child div (25px) ?

Answer 1

As per i understand your question may be you can use display:table property. Like this:

.parent{
    display:table;
    height:300px;
    width:100%
}
.parent div{
    display:table-row;
    width:100%;

}
.child{
    background:green;
}
.child2{
    background:red;
    height:25px;
}

http://jsfiddle.net/WBh9W/4/

display:table property is not work in IE7 & below.