Question

I have a layout like this one:

<div id="container">
    <div id="A"></div>
    <div id="B"></div>
    <div id="C"></div>
</div>

and here’s the (incomplete) CSS:

#container {
    height: 400px;
    background: red;    
}

#A {
    height: 50px;
    background: yellow;
}

#B {
    height: 300px;
    background: blue;
    overflow-y: auto;    
}

#C {
    height: 50px;
    background: yellow;
}

So A B and C should be stacked on top of each other, and B should fill the remaining space between A and C, showing a scroll bar if its content is too much.
My problem is that sometimes C may be missing, how can I make B expand dynamically to take its space too?

Answer 1

One possible approach is:

#B:last-child {
    height: 350px;
}​

http://jsfiddle.net/thirtydot/7Bqkb/1/

So, if #B is the last child, manually set the height to the correct value.

:last-child browser support.