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 回答