Question

以最小高度划分，子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

您可以position:absolute向content div提供#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; }以使其与父母的身高相等

的CSS：

min-height

检查此http://jsfiddle.net/sandeep/hKttB/

修改还有其他选择。如果内容增加content div的高度也会增加，您也可以main给#content { height: 100%; min-height:300px; background-color: green; } div。

{{1}}

检查这个小提琴http://jsfiddle.net/sandeep/SRJrF/2/

Answer 2

我会试试这个：

在这种情况下，当内容较少时，我强制使用相同的最小高度。如果内容超出，则自动溢出。

#content {
    min-height: 300px;
    overflow:auto;
    background-color: green;
}

这就是我们在嵌套母版页中有内容div的方式。希望同样适合你。

由于

Answer 3

我认为这是不可能的。

但你可以尝试这样的事情。 jsFiddle

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

#menu,
#content{
    float: left;
    display:inline;
    width: 50%;
    position:relative;
}

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

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

另请阅读此min-height 关于最小高度。

div与min-height和子div具有父级的高度

3 个答案: