css - 拉伸动态嵌套 div 以适应固定容器？

Question

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/。

我将不胜感激任何帮助。

Answer 1

添加float:left;到课堂.a

简单，但有效。

Answer 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 */
}

Answer 3

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

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

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