'可用高度'内部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 - 为什么这个工作？

回答

相关问题