HTML + CSS 布局，底部框显示所有内容，可变高度顶部框滚动

Question

• 我想要两个盒子，一个放在另一个上面。
• 底部框的高度应与显示其全部内容所需的高度相同(我不知道该内容将占用多少高度)。
• 顶部框应填充容器的剩余高度，必要时为其内容生成滚动。

这个 fiddle 是我上面描述的一个工作示例:https://jsfiddle.net/gabrielmaldi/q258g40y/

HTML:

<div class="container">
  <div class="my-component">
    <div class="my-component_top-content">
      Variable content that should fill the container and scroll.
    </div>
    <div class="my-component_bottom-content">
      Variable content that should extend in height as much as needed.
    </div>
  </div>
</div>

CSS:

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 320px;
}

.my-component {
  display: table;
  height: 100%;

  background-color: lightblue;
}

.my-component_top-content {
  display: table-row;
  height: 100%;
  float: left;
  overflow-y: auto;

  background-color: green;
}

.my-component_bottom-content {
  display: table-row;
  height: 0;

  background-color: orange;
}

这在 Chrome(直到版本 49)和 Safari 中工作正常。问题是它在 Chrome 50 及更高版本中中断(您可以浏览 Chrome Canary 中的 fiddle 并亲自查看)。

我提交了这个问题:https://bugs.chromium.org/p/chromium/issues/detail?id=594376并且正在进行一些讨论。但根据 CSS 规范，这可能不是 Chrome 中的回归(Chrome 49 行为与 Firefox 不匹配，而 Chrome 50 行为匹配)。

我还没有找到一种方法来实现我想要的在 Chrome Canary(或 Firefox，虽然我并不特别需要支持，但也许在 Firefox 中工作的布局也可以在更新的版本中工作) Chrome 版本)。

那么，我如何才能实现我在最初的三个要点中描述的并且在 Safari、Chrome 49 和 Chrome 50 (Canary) 中有效的内容呢？

编辑:我需要支持较旧的 Android Stock 浏览器，因此最好是在没有 display: flex; 的情况下实现，那里没有很好的支持.

谢谢!

Answer 1

根据对旧浏览器支持的评论/要求进行更新，这里是一个display: table 版本

更新 2，现在可以在 Webkit(包括 Canary)、Firefox、Edge、IE11 上运行

html, body {
  margin: 0;
  height: 100%;
}
.container {
  height: 100%;
}
.my-component {
  display: table;
  height: 100%;
  width: 100%;
}
.my-component-top {
  display: table-row;
  background-color: yellow;
  height: 100%;
}
.my-component-top-cell {
  display: table-cell;
  height: 100%;
  position: relative;
}
  /* IE11 fix - need block */
  _:-ms-fullscreen, :root .my-component-top-cell { display: block; }

.my-component-top-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.my-component-bottom {
  display: table-row;
  background-color: green;
}

<div class="container">
  <div class="my-component">
    <div class="my-component-top">
      <div class="my-component-top-cell">
        <div class="my-component-top-inner">
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
          Variable content that should fill the container and scroll.<br>
        </div>
      </div>
    </div>
    <div class="my-component-bottom">
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
    </div>
  </div>
</div>

---

对于现代浏览器，像这样使用 flex，其中顶部框有 flex: 1 来填充剩余空间，底部框有 flex: 0 尽可能少地占用可用空间。

另外，我在顶部框上添加了一个 min-height: 20px; 以防底部框中的内容变大(防止它完全消失)。

html, body {
  margin: 0;
  height: 100%;
}

.container {
  height: 100%;
}
.my-component {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.my-component_top-content {
  background-color: yellow;
  overflow: auto;
  flex: 1;
  min-height: 20px;
}

.my-component_bottom-content {
  background-color: green;
  flex: 0;
}

<div class="container">
  <div class="my-component">
    <div class="my-component_top-content">
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
      Variable content that should fill the container and scroll.<br>
    </div>
    <div class="my-component_bottom-content">
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
      Variable content that should extend in height as much as needed.<br>
    </div>
  </div>
</div>