Fill remaining vertical space - only CSS

Question

I need to fill the remaining vertical space of #wrapper under #first with #second div.

I need an only CSS sol

Answer 1

If you can add an extra couple of divs so your html looks like this:

You can make use of the display:table properties:

#wrapper
{
   width:300px;
   height:100%;
   display:table;
}

.row 
{
   display:table-row;
}

.cell 
{
   display:table-cell;
}

#first .cell
{
   height:200px;
   background-color:#F5DEB3;
}

#second .cell
{
   background-color:#9ACD32;
}

Example