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 Demo

Answer 2

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

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

2 个答案: