CSS:在父级内部获取所有可用高度而不会溢出它

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/

如何制作蓝色方形,适合黑色,父容器？没有javascript可以吗？

使用表格元素会更容易,但是在Opera和IE中会出现表格.高度100%的td元素不能按预期工作,取表格元素本身的高度忽略该表中所有其他td的高度.

例如,使用Opera或IE打开:

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

Answer 1

忘记表:).你可以使用绝对定位:

#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演示