Question

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

有人设法做到了吗？

Here是我想要做的一个例子，我把代码放在下面。我希望#c的最小高度为#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}

除了现代浏览器之外，我并不担心它会起作用。

Answer 1

根据我的理解，你的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;}

Answer 2

你的亲密关系：

<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;}

@ gearsdigital的回答

FIDDLE （reDdit）

嵌套div的最小高度

2 个答案: