Div filling available height

Question

I have a problem. As you can see from the code, in div named "div1" I have 3 divs. I want first (yellow) div to be on top, third (yellow) to be on bottom, and the second div (pink) to fill the remaining space. The only fixed heights are the heights of yellow divs. Can you please help me, how to make the pink div fill the remaining space? Here is my code:

<div style="width:100%;background-color: lime;display: table;border-collapse: collapse;">
<div style="display: table-row;">
    <div id=div1 style="display: table-cell;background-color: #0f0;">

        <div style="background-color:yellow;width:100%;height:20px;">s</div>
        <div style="background-color:pink; width:100%;">
            Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa d sad dsa Lorem  dsadsad dsa    
        </div>
        <div style="background-color:yellow;width:100%;height:20px;">s</div>
    </div>
    <div style="background-color: #f00;display: table-cell;width:250px">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum
    </div>
</div>

Answer 1

Having to post this as an answer in order to include the graphic. In Firefox and Chrome and IE, your page looks as I think you've described it:

Is this how it should appear?

Answer 2

With a little trickery this can be done:
Text in right cell is taller: http://jsfiddle.net/UQgXM/2/
Text in left cell is taller: http://jsfiddle.net/UQgXM/3/

I've separated the CSS from the HTML. Major changes:

• Given the table a height. This is needed to make the divs in the cell respond to the height setting. The table height is ignored. I set it to 1%, but the table want to be larger.
• Given the pink div a height of 100% and a margin and padding to position the content right.

• Given the yellow divs (especially the top one) a z-index of 1 and position: relative to make it respond to the z-index. Otherwise it would drop behind the pink div.

    <div class="top">s</div> <div class="middle"> Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa </div> <div class="bottom">s</div> </div> <div class="rightcell"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum </div> 

  ​

And the CSS:

.table {
    width:100%;
    height: 1%;
    background-color: lime;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
#div1 {
    display: table-cell;
    background-color: #0f0;
}
.top,
.bottom{
    background-color:yellow;
    width:100%;
    height:20px;
    z-index: 1;
    position: relative;
}
.middle {
    background-color:pink; 
    width:100%;
    height: 100%;
    margin: -20px 0;
    position: relative;
    padding: 20px 0;
}
.rightcell {
    background-color: #f00;
    display: table-cell;
    width:250px;
}
​

Answer 3

With a little javascript, you can do some math and calculate the height the pink div should be.

var rightD = document.getElementById('rightDiv');
var yellowD = document.getElementById('yellowD');
var middleD = document.getElementById('middleDiv');
var height = rightD.clientHeight - (yellowD.clientHeight * 2);

middleD.style.height = height + 'px';

http://jsfiddle.net/kX4UB/1/

You don't need to declare so many variables, but I did just for easy display. I just set the height to the red div's height minus the yellow div's height x2. Note, this code should be placed in js tags after these divs in the doc.