【发布时间】：2013-04-04 20:22:31
【问题描述】：
我有一个在 CSS 中工作的布局，但我不明白 为什么 它工作。 CSS 专家，请解释一下这里发生了什么。
我的目标是有这样的布局：
显着的特点是：
- 窗口顶部和底部的固定高度页眉和页脚
- 内容区域占据了页眉和页脚之间的全部空间
- 内容区域有自己的滚动条（即它不会将页脚向下推到屏幕底部之外）。
我使用 css flex box 和内容 div 内的 0% 高度的 div 组合实现了它。出乎我的意料，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 具有 height:0% 的嵌套 div（docstretch 和 docwindow）创建了我想要的内容 div，占据了页面的完整“内部空间”并拥有自己的滚动条。但为什么？这是一个安全的解决方案吗？
【问题讨论】：
-
你想要这样吗...babysoftblog.com/tablet/eco_energy
-
不——eco_energy 模板内部似乎保持了固定高度。我希望滚动条始终占据页眉和页脚之间的全部空间。
-
是一个实例，Flexbox 可用于使用零高度元素获得类似结果，但它仅适用于列方向。看到这个问题：stackoverflow.com/questions/14962468/…
-
哎呀，我的情况与您链接的答案完全相同。我确实有一个列方向 - flex-flow:row 应用于子元素，它来自一个更复杂的示例。
-
@amwinter 我已经通过 css 尝试过这个，但我没有成功，也许一些自定义 jquery 会有所帮助......我确定......