0

我有一堆嵌套的 div，中间是一些内容。我希望包含内容的 div 具有最外层 div 的最小高度。

有没有人设法做到这一点？

这是我想要做的一个例子，我把代码放在下面。我希望最小高度为#cs#a高度。这应该呈现一个绿色框，但它实际上是红色的。

<div id="a">
    <div id="b">
        <div id="c">
            Content here
        </div>
    </div>
</div>

​​#a { height: 100px; }
#b { min-height: 100%; background-color: red}
#c { min-height: 100%; background-color: green}
​

我不担心它在现代浏览器之外的任何东西上工作。

4

2 回答 2

0

据我了解，您的 div #a 具有固定的高度，如果是这样的话：

尝试使用此样式#a

overflow: hidden;

并添加到#b 和#c

display: inline;

这就是您的小提琴应该是什么样子，刚刚经过测试并且可以正常工作：

#a { min-height: 100px; overflow:hidden;}
#b { min-height:100%; background-color: red; display:inline;}
#c { min-height:100%; background-color: green; display:inline;}​
于 2012-12-12T13:07:24.540 回答
0

你很接近：

<div id="a">
    <div id="b">
        <div id="c">
            Content here<br />
            her is more content<br />
            Content here<br />
            her is more content<br />
            Content here<br />
            her is more content<br />
            Content here<br />
            her is more content<br />
            Content here<br />
            her is more content<br />

        </div>
    </div>
</div>

CSS：

#a { height: auto; }
#b { min-height:100%; background-color: red}
#c { min-height:100%; background-color: green;}​

​<strong> FIDDLE（重新编辑）@gearsdigital 的回答

于 2012-12-12T13:31:49.313 回答