展開一個div到其父容器的底部

我有一個div #parent具有min-height:400px;展開一個div到其父容器的底部

這個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黑客

來源

2011-03-01 user502014

如果它與[你的上一個問題]有什麼關係（http://stackoverflow.com/questions/5154149/min-height-with-absolute-positioning/5154462#5154462），它不會發生*與帶有兩個可變高度元素的純CSS。 – thirtydot 2011-03-01 13:33:54

這是非常棘手的只有CSS做。這是可能的，但它變得很難看，相反，當我需要這樣做時，我使用YUI Layout Manager。我相信JQUERY也有類似的東西。但是我發現這是最簡單，最無缺陷的方式來完成你的要求。

來源

2011-03-01 13:02:19 Zoidberg

編輯：對不起，這不實際工作 - 底部的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不能有一個固定的高度，那麼你的運氣了。

來源

2011-03-01 15:37:50 betamax

展開一個div到其父容器的底部

回答

相關問題