css - 具有最小高度的 div 和子 div 具有父级的高度

Question

具有最小高度的 div 和子 div 具有父级的高度。

是否只需要 CSS 或 javascript 就可以？

例子:

#main {
    min-height: 300px;
    width: 100%;
}

#menu, #content {
    float: left;
    width: 50%;
}

#menu {
    height: 150px;
    background-color: red;
}

#content {
    height: 100%;
    background-color: green;
}


<div id="main">
            <div id="menu">menu</div>
            <div id="content">content</div>
<div>

Answer 1

也许你可以给你的 content div position:absolute 让它和它的父级一样高

CSS:

#main {
    min-height: 300px;
    width: 100%;
    position:relative;
    background-color: yellow;
}

#menu, #content {
    float: left;
    width: 50%;
    overflow:hidden;
}

#menu {
    height: 150px;
    background-color: red;
}
#content {
    height: 100%;
    background-color: green;
    position:absolute;
    top:0;
    right:0;
}

检查这个http://jsfiddle.net/sandeep/hKttB/

编辑 还有其他选择。如果内容增加 main div 的高度也增加，您也可以将 min-height 给 content div。

#content {
    height: 100%;
    min-height:300px;
    background-color: green;
}

检查这个 fiddle http://jsfiddle.net/sandeep/SRJrF/2/