将 div 展开到其父容器的底部答案

【问题标题】：Expand a div to bottom of its parent container将 div 展开到其父容器的底部
【发布时间】：2013-04-07 01:12:20
【问题描述】：

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

这个 div 包含 2 个子 div，我想将最后一个子 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

【问题讨论】：

如果它与your previous question 有任何关系，那么对于具有两个可变高度元素的纯 CSS，它不会发生。

标签： css

【解决方案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 不能有一个固定的高度，那么你就不走运了。

【讨论】：

【解决方案2】：

仅使用 CSS 是非常棘手的。这是可能的，但它变得丑陋，相反，当我需要这样做时，我使用YUI Layout Manager。我相信 JQUERY 也有类似的东西。但我发现这是满足您要求的最简单、最无错误的方法。

【讨论】：