2

コンテンツに合わせて垂直方向にサイズ変更するヘッダーと、残りの部分を垂直方向にサイズ変更するフッターをレイアウトして、固定サイズのコンテナーでオーバーフローをスクロールしようとしています。CSS box-flexを使用すると、Chromeでは機能するがFirefoxでは機能しない例があります（http://jsfiddle.net/V4Uc2/）。Firefoxがコンテナからのオーバーフローを許可せず、Chromeのように機能するようにするには、どのCSSスタイルを追加する必要がありますか？インラインコードは次のとおりです。

<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>
4

1 に答える 1

1

追加

width: 100%;

フッターのcssの説明で。

これにより、水平方向のオーバーフローが防止され、Firefoxは400pxを固定幅として保持します。

于 2012-11-27T12:21:44.700 に答える