0

我有一个在 CSS 中工作的布局，但我不明白它为什么工作。CSS专家，请阐明这里发生了什么。

我的目标是有这样的布局：

所需的布局

显着特点是：

  1. 固定窗口顶部和底部的高度页眉和页脚
  2. 占据页眉和页脚之间全部空间的内容区域
  3. 内容区域有自己的滚动条（即它不会将页脚向下推到屏幕底部之外）。

我使用 css flex box 和 0% 高度的内容 div 内的 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 的嵌套 div（docstretch 和 docwindow）height:0%创建了我想要的内容 div，占据了页面的完整“内部空间”并拥有自己的滚动条。但为什么？这是一个安全的解决方案吗？

4

1 回答 1

0

如果你去掉所有的 Flexbox 属性，你会发现它和 Flexbox 完全没有关系：

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

问题是你有height: 0%. 删除 % ，它会按您的预期工作：

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

于 2013-04-04T12:22:31.583 回答