填寫所有剩餘空間

我正在編寫一個網頁，我需要一個包含兩個div（一個工具欄和一個編輯器）的div包裝器。工具欄heigth是未知的，我需要使編輯器div填充包裝中的所有剩餘空間。填寫所有剩餘空間

該解決方案需要完整的HTML + CSS。

<div id="wrapper"> 
    <div id="toolbar"> 
    </div> 
    <div id="editor"> 
    </div> 
</div>

對於CSS：

#wrapper { 
    position: absolute; // I need this, I can't remove it 
    top: 0; // should stick on the top 
    height: 100%; // should span across the whole height 
    width: 100%; // Can be anything 0 ≤ width ≤ 100% 
} 

#editor { 
    width: 100%; // fill the whole horizontal space 
    height: 100%; // if I do so, the div gets too high and the #editor goes beyond the wrapper limit 
}

這裏有一個jsfidlle與http://jsfiddle.net/o3hqyxxu/

來源

2015-06-05 cphyc

我分叉它。我認爲這更好地顯示你的問題：http://jsfiddle.net/3du3w9r6/ – Jakar

我發現瞭解決方案http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-剩餘的屏幕空間？rq = 1使用flexboxes。 – cphyc

一種選擇打被設置的div表和錶行的顯示：

#wrapper { 
 
    position: absolute; 
 
    top:0; 
 
    height: 100%; 
 
    width: 70%; 
 
    display:table; 
 
} 
 
#a { 
 
    background-color: grey; 
 
    width: 100%: 
 
} 
 
#b { 
 
    background-color: lightblue; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#a, #b { 
 
    display:table-row; 
 
}

<div id='wrapper'> 
 
    <div id='a'>Some content that is long enough to fill a full line an even more, so you need to go back to the next line, … Ok, I think that is enough. If you have a wider screen, append text there :)</div> 
 
    <div id='b'>I want this div to fill all the empty save, not more.</div> 
 
</div>

來源

2015-06-05 16:13:47 j08691