html - CSS Box Flex 固定高度容器，顶部可调整大小，底部可滚动

Question

我正在尝试布局一个将垂直调整大小以适应内容的页眉，以及一个将垂直调整剩余大小的页脚，然后在给定固定大小的容器的情况下滚动任何溢出。使用 CSS box-flex 我有一个适用于 Chrome 但不适用于 Firefox 的示例（http://jsfiddle.net/V4Uc2/）。我需要添加哪些 CSS 样式以确保 Firefox 不允许容器溢出并像 Chrome 一样运行？这是内联代码：

<style>
  .container
  {
    background: #fee;
    height: 400px;
    width: 400px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
  }
  .header
  {
    background: #fee;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
  }
  .footer
  {
    background: #eef;
    overflow: auto;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
  }
</style>

<div class="container">
  <div class="header">...</div>
  <div class="footer">...</div>
</div>

Answer 1

添加

width: 100%;

在您的页脚 css 描述中。

这样可以防止水平溢出，Firefox 将 400px 保留为固定宽度。