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

Answer 2

height:100%;意味着我想要和父母一样高。由于父母#wr有更多的孩子，#con_bottom不适合。在您当前的情况下，85% 的高度似乎适合#con_bottom. 请记住，边距和边框（以及父级的填充）计入可用空间。