'可用高度'內部div - 爲什麼這個工作？

我有一個佈局在CSS中工作，但我不明白它爲什麼它的工作原理。 CSS專家，請闡明這裏發生的事情。'可用高度'內部div - 爲什麼這個工作？

我的目標是有一個這樣的佈局：

desired layout

的突出特點是：

固定高度的頁眉和頁腳在窗口的頂部和底部
佔據頁眉和頁腳之間全部空間的內容區域
內容區域有其自己的滾動條（即i t不會將頁腳向下推過屏幕底部）。

我做到了這一點，使用CSS彈性框和內部div的組合，0％的高度。違揹我的期望，0％高度的div伸展到全部可用高度。

這是一個JSFiddle：http://jsfiddle.net/2wunC/（它看起來不太正確，因爲外部height:100%在jsfiddle容器內沒有意義）。

HTML

<div id="everything"> 
    <div id="header">fixed-height header</div> 
    <div id="workspace"> 
    <div class="docstretch"><div class="docwindow"> 
     filler text<br>filler text<br>filler text<br>... 
    </div></div> 
    </div> 
    <div id="footer">fixed-height footer</div> 
</div>

CSS

#everything {display:-webkit-flex;-webkit-flex-flow:column;-webkit-align-items:stretch;height:100%;} 
#header {height:2em;background:lightgray;} 
#footer {height:2em;background:darkgray;} 
#workspace {-webkit-flex:1 0 auto;display:-webkit-flex;-webkit-flex-flow:row;} 
.docstretch {background:#05c;color:white;width:300px;overflow-y:scroll;} 
.docwindow {height:0%;} /* why does this work? */

我的問題：嵌套的div（docstretch和docwindow）用具有height:0%內的div創建的內容DIV我想，佔用了全頁面的「內部空間」並擁有自己的滾動條。但爲什麼？這是一個安全的解決方案嗎？

來源

2013-04-04 amwinter

做... http://babysoftblog.com/tablet/eco_energy/ – SaurabhLP 2013-04-04 06:20:40

否 - eco_energy模板內部似乎依然一個高度。我希望滾動條總是佔據頁眉和頁腳之間的全部空間。 – amwinter 2013-04-04 18:26:42

這裏有*是一個Flexbox可用於使用零高度元素獲得類似結果的實例，但它僅適用於列方向。看到這個問題：http://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api – cimmanon 2013-04-04 19:20:50

如果你帶走所有的Flexbox的屬性，你會看到它有無關Flexbox的根本：

http://jsfiddle.net/2wunC/2/

的問題是，你有height: 0%。放下％和它的作品，你會想到：你要這樣

http://jsfiddle.net/2wunC/1/

來源

2013-04-04 12:22:31 cimmanon

我試圖你的fork/2 /（與0％的一個）在獨立的文件和內容分區崩潰。 JSFiddle通過引入額外的容器來混淆問題。 – amwinter 2013-04-04 18:32:30

哪個瀏覽器？ Opera，Chrome，Firefox，IE9都顯示藍色div完全可見。 – cimmanon 2013-04-04 18:40:09

鉻25.0.1364.172米'。你是在jsfiddle中測試還是作爲獨立的html文件測試？ – amwinter 2013-04-04 19:07:28

'可用高度'內部div - 爲什麼這個工作？

回答

相關問題