孩子身高的div擴大到父DIV的底部

我有以下的html：孩子身高的div擴大到父DIV的底部

<div class="div1"> 
    <div class="div1a"></div> 
    <div class="div1b"></div> 
    <div class="div1c"></div> 
</div>

這裏佈局的鏈接：http://jsfiddle.net/7ZGaG/5/

我只需要到DIV1給予高度。

div1a和div1b有固定的高度。（其實div1也有固定的高度）
div1c需要展開到div1的底部。

例如：

DIV1： 400像素
DIV1A：100px的
DIV1B：100px的
div1c： 50像素

因此，有在底部150像素空的地方。（400-100-100-50 = 150）。我怎樣才能解決這與CSS div1c有高度的div1的底部？

如果我爲div1c做height:100%，那麼它需要div1的高度，那就是400px。

謝謝！

來源

2011-10-28 Ozkan

如果您嘗試使用高度：auto;對於div1c – Rohan

@Rohan然後，它需要自身的高度（50px） – Ozkan

並且由於某些原因，您無法將div1c的高度設置爲200px？ div1的高度會改變嗎？ – dunnza

.div1 { height: 400px; } 
.div1a { 
    float: left; 
    width: 100%; 
    height: 100px; 
    clear: both; } 
.div1b { 
    float: left; 
    width: 100%; 
    height: 100px;  
    clear: both; } 
.div1c { height: 100%; }

見工作示例：http://jsfiddle.net/Wexcode/ENaqK/

來源

2011-10-28 09:46:17 Wex

這是它的感謝，但仍然有點hacky。但是，好的：D – Ozkan

嗯，這究竟是怎麼回事？它只是使用浮動的屬性。 – Wex

向左浮動意味着div必須放在上面的div之外。但是在這裏我們有垂直方向的所有div – Ozkan

下面是一些將做到這一點的CSS。

.div1是overflow: hidden設置爲抓取最高div的高度。這聽起來可能是.div1a或.div1b。 .div1c是position: absolute，以便它可以使用.div1是一個指南，它將自己定位在bottom之外，並且與top和right相關聯。

.div1 { 
    width: 450px; 
    position: relative; 
    background: wheat; 
    overflow: hidden; 
} 
.div1a { 
    float: left; 
    width: 150px; 
    background: blue; 
} 
.div1b { 
    float: left; 
    width: 150px; 
    height: 120px; 
    background: red; 
} 
.div1c { 
    width: 150px;  
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 150px; 
    background: pink; 
}

和小提琴：http://jsfiddle.net/neilheinrich/7ZGaG/

來源

2011-10-28 09:19:27 nheinrich

根據您的意見更新爲略有不同。 – nheinrich

嗨@nheinrich。你擁有的佈局是不同的。 http://jsfiddle.net/7ZGaG/5/在這裏你可以看到它，也是我的問題。所以粉紅色的div應該擴展到父級div，但是如何？ – Ozkan

啊，我以爲你要去看專欄。 – nheinrich

下面是我想出（my jsfiddle）：

.div1 { 
    position: relative; 
    height: 400px; 
    border: 1px solid black; 
    overflow: hidden; 
} 

.div1a { 
    height: 100px; 
    background-color: yellow; 
} 

.div1b { 
    height: 100px; 
    background-color: blue; 
} 

.div1c { 
    position: relative; 
    top: 200; 
    height: 100%; 
    background-color: red; 
}

我會做有點不同，但是，如果我不得不訪問JavaScript的。

來源

2011-10-28 09:37:59 dunnza

請參閱我的主要職位，請爲我的模板。佈局是垂直的，沒有浮動 – Ozkan

簡單的解決方案將是風格overflow:hidden父div和孩子div與height:100%

添加以下屬性：

對於div1

position:fixed

對於div1c

overflow:hidden; position:relative; height:100%;

示例代碼 - http://jsfiddle.net/7ZGaG/26/

來源

2012-09-23 15:53:58 Swanidhi

與問題相關的示例代碼會有幫助（順便提一下，有趣的答案）。 –

剛剛更新了我的帖子。示例編碼已添加。乾杯！ – Swanidhi

孩子身高的div擴大到父DIV的底部

回答

相關問題