使用带有滚动功能的 HTML 和 CSS 创建特定的布局

Question

这听起来很有趣，但我很难找到一个优雅的解决方案来创建特定的布局，并希望在这里找到其他用户的一些提示。

我想创建这个布局：

这些是要求：

整个组件有一定的宽度。具有 a 和 b 的组件具有一定的宽度，例如200 像素。 c 获取其宽度的剩余空间。 c 定义了一个特定的高度。 a 和 b 一起应该具有与 c 相同的高度。 a 有一定的高度，但它是未知的。它最终被计算并且不能用于计算，因为它可以改变。但是在渲染之后它有一定的高度。 b 应使用剩余空间作为其高度，例如c的高度-a的高度。最后 b 可以大于可用空间，所以它应该使用 scrolling-y 功能。如果组件变得大于可用高度，您应该会看到一个滚动条。

我尝试了不同的方法，例如浮动，桌子，但总是强迫我为 b 设置一定的高度。

如果有人可以就适当的解决方案提供建议，我会很高兴。

编辑：

我对表格的处理方法：http://jsfiddle.net/f7c6dzfL/

.test {
  border: 1px solid red;
  height: 400px;
  display: table;
  width: 100%;
}
.test .left {
  display: table-cell;
  border: 1px solid red;
  width: 50%;
}
.test .left .top {
  border: 1px solid blue;
  width: 100%;
  height: 100px;
}
.test .left .bottom {
  border: 1px solid blue;
  width: 100%;
  max-height: 100%;
  overflow-y: scroll;
}
.test .right {
  display: table-cell;
  width: 50%;
}

<div class="test">
  <div class="left">
    <div class="top"></div>
    <div class="bottom">
      <ul>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
      </ul>
    </div>
  </div>
  <div class="right"></div>
</div>

Answer 1

这是working example：

.container {
  width: 100%;
  position: absolute;
}
.container .left {
  width: 300px;
  float: left;
  border: 1px solid red;
  height: 100%;
  position: absolute;
  display: flex;
  flex-flow: column;
}
.container .left .top {
  height: 100px;
  border: 2px solid black;
  flex: 0 1 auto;
}
.container .left .bottom {
  border: 2px solid blue;
  flex: 1 1 auto;
}
.container .right {
  margin-left: 300px;
  border: 1px solid green;
  height: 100%;
}

<div class="container">
  <div class="left">
    <div class="top">My content</div>
    <div class="bottom">My content is very long in this section.
      <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
      </ul>
    </div>
  </div>
  <div class="right">
    <p>This is the content on the right</p>
    <p>My content is very long in this section.</p>
    <ul>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
    </ul>
    <p>This div defines the height of the entire container class.</p>
    <p>Lacus felis. Donec velit. Purus metus. Massa magna interdum vestibulum hymenaeos ipsum penatibus luctus a interdum sit orci. Vitae augue. Felis donec. Porta augue. Metus risus pulvinar vestibulum consequat etiam leo eros ac. Class massa laoreet nunc
      tristique auctor mollis. Curae proin. Morbi metus iaculis dictumst.</p>
  </div>
</div>

关于浏览器兼容性的说明： 根据CanIUse.com、display: flex、flex-flow: column 和flex，所有当前版本的现代浏览器（包括 IE 11）都支持。但是，如果您需要对 IE 8 或 IE 9 的支持，您将无法使用此解决方案。如果需要支持 IE 10，则需要使用 -ms- 前缀。

---

致谢：

我使用这些问题来帮助制定我的答案：

• Make a div fill the height of the remaining screen space
• How to make a floated div 100% height of its parent?