CSS: Taking the all available height inside parent without overflowing it

Question

<div id="wr">
    <div id="con_top"></div>
    <div id="con_bottom"></div>
</div>​

#wr {
    height:400px;
    width:80%;
    margin:50px auto;
    border:1px solid black;
}
    #con_top {
        height:40px;
        margin:5px;
        border:1px solid red;            
    }
    #con_bottom {
        height:100%;
        border:1px solid blue;
        margin:5px;    
    }​

http://jsfiddle.net/nMbWw/

How to make blue square, fit the black, parent container? Is it possible without javascript?

With table elements it's much easier, but table is bugged in Opera and IE. td element on height 100% doesn't work as intended, taking the height of table element itself ignoring the height of all others td in that table.

For example, open with Opera or IE:

http://jsfiddle.net/UTMRn/3/

Answer 1

Forget tables :). You could use absolute positioning:

#wr {
    height:400px;
    width:80%;
    margin:50px auto;
    border:1px solid black;
    position: relative; /* added to keep the absolute element inside */
}

#con_top {
    height:40px;
    margin:5px;
    border:1px solid red;            
}

#con_bottom {
    border:1px solid blue;
    margin:5px;    
    position: absolute; /* make it absolute */
    top: 45px; /* the height of the other element + its margin */
    bottom: 0; /* stick to the bottom */
    left: 0; /* stick to the left */
    right: 0; /* stick to the right */
}​

jsFiddle Demo