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％
  < / LI>

以下小提琴具有或多或少的元素，但尺寸错误。

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

应该没有顶级滚动条。如果任何红色，绿色，紫色div内容变得太大，它本身应该溢出。

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

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

谢谢你的帮助！

我愿意转而使用flexbox，但在那里遇到了类似的问题。

Answer 1

使用flexbox，

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>

CSS：如何均匀分享剩余的垂直空间？

1 个答案: