CSS：如何平均共享剩余的垂直空间？

Question

我整个下午都在尝试实现一个相当简单的设计，首先使用 flex，然后只是使用旧的 div，但仍然卡住了。

HTML 布局相当简单。

<div id="interface">
  <div id="toolbar">
    Toolbar<br/>Toolbar
  </div>
  <div id="main">
    <div id="main-left">
      This should take the full vertical space remaining after the toolbar,
      and half the horizontal space.
    </div>
    <div id="main-right">
      <div id="context">
        This should take half and half the remaining space after the toolbar.
      </div>
      <div id="messages">
        This should take half and half the remaining space after the toolbar.
      </div>
    </div>
  </div>
</div>

问题是，我希望我的布局具有：

• 不固定高度的顶部#toolbar

• 屏幕的其余部分 #main 应垂直分割为 50%

  • 在左边，整个高度应该被#main-left占据

  • 右侧部分#main-right应该水平分割，两个部分（#context和#messages）占据工具栏后剩余垂直空间的50%

以下小提琴的元素或多或少已经到位，但尺寸错误。

预期结果不应包含黄色。红色区域应该占据整个垂直空间。绿色和紫色应该占据垂直空间的一半。

不应该有顶级滚动条。如果任何红色、绿色、紫色的 div 内容太大，它应该会在自身内部溢出。

注意将#context 和#messages 的高度设置为50% 是不正确的，因为它们变得太大（看起来它们变成了#interface 高度的50%，而不是#main 的高度）

http://jsfiddle.net/59trW/63/

感谢您的帮助！

我愿意切换到弹性盒，但在那里遇到了类似的问题。

Answer 1

使用弹性盒，

html, body, #interface {
  height: 100%;
  margin: 0;
}
#interface, #main, #main-right {
  display: flex; /* Flex container */
}
#interface, #main-right {
  flex-direction: column; /* Column layout */
}
#main, #main-left, #main-right, #context, #messages {
  flex: 1; /* Distribute space equally among the flex items */
  overflow: auto; /* Use scrollbars if necessary */
}
#toolbar    { background-color: pink;   }
#main       { background-color: yellow; }
#main-left  { background-color: red;    }
#main-right { background-color: blue;   }
#context    { background-color: green;  }
#messages   { background-color: purple; }

<div id="interface">
  <div id="toolbar">
    Toolbar<br/>Toolbar
  </div>
  <div id="main">
    <div id="main-left">
      This should take the full vertical space remaining after the toolbar,
      and half the horizontal space.
    </div>
    <div id="main-right">
      <div id="context">
        This should take half and half the remaining space after the toolbar.
      </div>
      <div id="messages">
        This should take half and half the remaining space after the toolbar.
      </div>
    </div>
  </div>
</div>