拉伸动态嵌套 div 以适应固定容器？答案

【问题标题】：Stretch dynamic nested divs to fit fixed container?拉伸动态嵌套 div 以适应固定容器？
【发布时间】：2013-02-08 08:40:54
【问题描述】：

HTML

<div class="container">
    <div class="a">dummy content</div>
    <div class="b"></div>
</div>

CSS

.container {
    height: 200px; /* Fixed height */
}

.a {
    height: auto; /* Dynamic height */
}

.b {
    height: 100%; /* I want this to fit inside .container, relative to .a */
}

当 .a 获得例如 100px 的动态高度时，我希望 .b 为 .container 高度 - 100px。我希望这使用纯 CSS 自动发生。

请看我的 jsFiddle：http://jsfiddle.net/59MKS/。

如果能提供任何帮助，我将不胜感激。

【问题讨论】：

你想在class-b框中添加一些内容吗？
@mayaa 是的，应该可以包含一些内容。

标签： css size containers stretch html

【解决方案1】：

将float:left; 添加到类.a

简单但有效。

【讨论】：

是的，这似乎有效。我想这将是最好的解决方案？
这取决于你需要什么。也许您不希望.b 的内容溢出到.container 之外，然后您可以将此解决方案与.container 上的overflow:hidden 结合使用。只需尝试所有解决方案，看看会发生什么。

【解决方案2】：

试试这个：

.container {
position: absolute;
background-color: red;
width: 100px;
height: 200px; /* Fixed height */
}

.a {
position: relative;
 background-color: green;
 width: 90px;
 height: auto; /* Dynamic height */
}

.b {   
background-color: blue;
 width: 80px;
   height: 100%; /* I want this to fit inside the red container */
}

【讨论】：

我的问题可能有点措辞不当。当 .a 获得例如 100px 的动态高度时，我希望 .b 为 .container 高度 - 100px。我希望这使用纯 CSS 自动发生。

【解决方案3】：

我猜你必须使用 jQuery。这就是我的做法http://jsfiddle.net/59MKS/4/

var height = $(".container").height() - $(".a").height();

$(".b").css("height", height);

【讨论】：