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保持為固定寬度。