帶有inline-block div的頁眉頁腳內容佈局取剩餘空間（不浮點或溢出：隱藏）

我有一個（相對）簡單的佈局，並帶有固定的頁眉和頁腳div。內容div分爲兩個「全高」divs display: inline-block;。左邊的div用於導航，右邊的div用於實際內容並且有overflow-y: scroll;。問題是我無法設置右側div的寬度來填充剩餘空間。我嘗試過使用float（作爲最後的手段），但正確的div被向下推，坦率地說，我不想使用浮動。帶有inline-block div的頁眉頁腳內容佈局取剩餘空間（不浮點或溢出：隱藏）

在我的方案中填充剩餘寬度可能嗎？我非常想不要硬編碼正確的div的寬度。

這裏是JSFiddle example。

簡單的HTML結構：

<html> 
<head></head> 
<body 
<div id="container"> 
    <div id="header">This is the header area.</div> 
    <div id="content"> 
     <div id="leftContent">&nbsp;</div> 
     <div id="textContent"> 
      <p>Hello world (and other content)</p> 
     </div> 
    </div> 
    <div id="footer">This is the footer area.</div> 
</div> 
</body> 
</html>

CSS摘錄：

html, body { margin:0; padding:0; height:100%; } 

#container { position:relative; margin:0 auto; width:750px; overflow:hidden; 
      height:auto !important; height:100%; min-height:100%; } 

#header { border-bottom:1px solid black; height:30px; } 

#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; } 

#leftContent { display:inline-block; height:100%; width:200px; 
       border-right:1px solid black; vertical-align:top; } 

#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll; 
       width:540px; /*would like to not have it hardcoded*/ } 

#footer { position:absolute; width:100%; bottom:0; height:30px; }

編輯：

感謝Prasanth's answer，我能夠實現我想要的東西。解決的辦法是設置

在#content DIV display:flex; flex-direction:row;和
width: 100%;在#textContent股利。

~~在IE 11上測試（向下以兼容模式）並沒有產生不需要的結果。~~ *新版本可以找到here。

*編輯：此方法在IE11中正常工作。在IE10中，如果#content div的內容需要滾動，則滾動條不會出現。佈局工作思路。在IE < 10中，它根本不起作用。

來源

2014-02-18 Andrei V

您可以使用Flexbox的通過this實現這一

去，你會得到你所需要的

.content{ display:flex } .content > div { flex: 1 auto; }

和瀏覽器支持提防

來源

2014-02-18 08:21:32 Prasanth

帶有inline-block div的頁眉頁腳內容佈局取剩餘空間（不浮點或溢出：隱藏）

回答

相關問題