css3 垂直方向元素占据所有剩余空间

完成一个编辑文章的功能，顶部是标题，底部是按钮，中间是正文。这种布局让上下的元素各自对称贴近顶底，中间留白作为正文的编辑区最好看。

本来觉得这是个简单功能，结果 google 发现很多方案都是简单的将顶底元素上下定位，看起来显得占满了屏幕，而中间编辑区域的元素在文档流中实际的占位大小并未改变。

因为编辑功能用了比较酷炫的 medium 控件，用户焦点选中编辑区域控件才能激活，所以需要让编辑控件的高度也能随浏览器高度自适应变化。

又一番调查后发现了 css3 新支持的 flex 属性可以完美解决问题。用到的核心属性如下：

• 父元素
  flex-flow: column;
  display:flex;

• 编辑控件(子元素)
  flex: 1;

这个 flex 属性类似于 android 布局中 weight，指明当前元素在父元素内分割的空间比例。这里只有一个元素拥有该属性，所以占据了所有剩余控件。

父元素的属性主要意思也是说自己支持纵向 flex 布局，这倒是没什么复杂，只是其他相关的属性也要注意下才能完美。

min-height: 100%; /* 至少撑满屏幕，万一文章内容比较长也可自动延伸 */
margin-top: 0;
margin-bottom: 0; /* 页面开始已经100%，margin 会导致初始状态即超出屏幕 */
padding-top: 0;
padding-bottom: 0; /* 这两条根据盒模型取舍，我司该处是 standard mode，同 margin 理由设为0 */
overflow-y: scroll; /* 一单文章超出初始区域，如果不能滚动就悲剧了 */

不过由于这几个属性比较新，旧的浏览器可能没法支持。