Question

我有一个div #parent，其min-height:400px;

这个div包含2个子div，其中最后一个我想扩展到其父级的底部，尽管里面有大量的内容。

父母的身高是流动的，因为内容可能很多或很小。

<div id="parent">
     <div id="child1"><!-- content here --> </div>
     <div id="child2><!-- this div should stretch down to bottom of parent container--></div>
</div>

#parent{min-height:400px;}

这是否可能 - 我不能使用任何js hacks

Answer 1

编辑：抱歉，这实际上不起作用 - 底部div不会扩展以适应内容：http://i.stack.imgur.com/pQpFk.png

只要#child1具有固定的高度，这是可能的。所以，你有：

<div id="parent">
     <div id="child1">&nbsp;</div>
     <div id="child2">&nbsp;</div>
</div>

然后你使用的CSS是：

#parent {
    min-height:200px;
    height:300px;
    position:relative;
    width:100%;
}
#child1 {
    position:absolute;
    height:50px;
    top:0;
    left:0;
    width:100%;
    background-color:blue;
}
#child2 {
    position:absolute;
    top:50px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:red;
}

请参阅此处的示例：http://jsfiddle.net/U8VdV/

如果#child1不能有固定的高度，那么你就不走运了。

Answer 2

这对于CSS来说非常棘手。这是可能的，但它变得丑陋，相反，当我需要这样做时，我使用YUI Layout Manager。我相信JQUERY也有类似的东西。但我发现这是最简单，最无bug的方式来做你想要的。

将div扩展到其父容器的底部

2 个答案: