带有最小高度的div，子div具有父元素的高度

Question

只使用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>

- João Sousa

---

请查看https://dev59.com/G3NA5IYBdhLWcg3wBpBm。 - Ben

Answer 1

也许您可以给您的内容

设置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/

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

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

请查看这个示例：http://jsfiddle.net/sandeep/SRJrF/2/

- sandeep

---

嗯，这个解决方案可能可行，但如果内容变得更高怎么办？你用overflow:hidden来截断它。那为什么不指定一个height而是min-height呢？我认为min-height的要求意味着内容可以高于300px，在这种情况下应该增长。 - DanielB

Answer 2

我会尝试这样做：

在这种情况下，当内容较少时，我强制子 div 具有相同的最小高度。 如果内容超过了该高度，则自动溢出。

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

这是我们在嵌套的母版页中拥有内容 div 的方式。 希望对您也有用。

谢谢

- kheya

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 有关最小高度的内容。

- rrapuya