用可滾動Div填充剩餘高度

所以我嘗試了多種解決方案，但似乎沒有一種適合我的佈局。我希望能得到的是2列，每列有2個div，佔據父母寬度的100％。每個div的高度根據內容而變化。用可滾動Div填充剩餘高度

所以這個想法是，左邊的2列將決定兩列的高度，最後一個div（在右下角）將可滾動並佔據剩餘空間。

我在這裏的jsfiddle一個例子：http://jsfiddle.net/Split98/cndej/但有2個問題是：一）它不會允許格C到仍處於高度 B的動態的），我真的不希望使用顯示器：table-cell

另外，當我嘗試在我的網站上實現這個臨時解決方案時，無論如何一切都破滅了。所以，我並沒有試圖解決某些問題，而是甚至不會考慮解決方案，而是在尋求幫助。

現在我知道有關於平等身高的問題，但我找不到解決兩個問題的方法：左右兩側的高度相同，並且所有4個div都佔據空間。

所以在它的最基本的形式（又一遍，我希望能做到這一點不表單元格如果可能的話）：

<div id="wrap"> 
<div class="left"> 
    <div class="A">A</div> 
    <div class="B">B</div> 
</div> 
<div class="right"> 
    <div class="C">C</div> 
    <div class="D">Need this to expand to fill</div> 
</div> 
</div> 


.left { 
width: 200px; 
display: table-cell; 
} 

.right { 
position: relative; 
width: 200px; 
display: table-cell; 
background: yellow; 
} 

.A { 
background: blue; 
height: 100px; 
} 

.B { 
background: pink; 
height: 200px; 
} 

.C { 
background: red; 
height: 50px; 
} 

.D { 
width: 100%; 
position: absolute; 
bottom: 0; 
left: 0; 
top: 50px; 
right: 0px; 
background: green; 
}

我也並不反對使用Javascript，但我它不是很強大。最好是，如果可能的話，我想用CSS來做到這一點。

謝謝你們！

來源

2013-04-09 Spencer

有很多關於這個問題的。答案是「不，你不能這樣做沒有JavaScript」。 http://stackoverflow.com/search?q=fill+remaining+height – TheBronx 2013-04-09 08:41:58

如果選擇JavaScript，可以使用jQuery的解決方案。

$(function(){ 
    $('.D').height($('.right').height() - $('.C').height()); 
})

http://jsfiddle.net/cndej/3/

來源

2013-04-09 09:52:38

完美！非常感謝你們。與js現在完全合作，看起來很棒！ – Spencer 2013-04-10 04:33:51

用可滾動Div填充剩餘高度

回答

相關問題