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 height - 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);

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

3 个答案: