1

次の単純な jsFiddle を確認してください - http://jsfiddle.net/mark69_fnd/DaYCa/28/

HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
  </head>
  <body>
    <div class="container table">
      <div class='thead'>
        <div class='tr'>
          <div class='td'>
            <div class='header'>header</div>
          </div>
        </div>
      </div>
      <div class='tbody'>
        <div class='tr'>
          <div class='td'>
            <div class='content'>content</div>
          </div>
        </div>
      </div>
      <div class='tfoot'>
        <div class='tr'>
          <div class='td'>
            <div class='footer'>footer</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS:

html, body {
  height: 100%;
  width: 100%;
  font-family: sans-serif;
}
.container {
  height: 100%;
  width: 100%;
  background-color: #ddd;
  display: table;
}
.thead {
  display: table-header-group;
}
.tbody {
  display: table-row-group;
}
.tfoot {
  display: table-footer-group;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
}
.content {
  background-color: #bbb;
  border: solid 1px;
  height: 100%;
}
.header {
  background-color: #999;
  border: solid 1px red;
}
.footer {
  background-color: #999;
  border: solid 1px green;
}

クロム：

ここに画像の説明を入力

Firefox および IE9:

ここに画像の説明を入力

3 つのブラウザーすべてで Chrome と同じように見えるように、コードを変更するにはどうすればよいですか?

PS ヘッダーとフッターには固定の高さを使用できますが、コンテンツには使用できません。

4

2 に答える 2

1

私はあなたの例をいじって、ブラウザがどのように動作するかを確認するためにテーブルにも再作成しました. まったく同じです: http://jsfiddle.net/scheinercc/hXYVm/
(Mac OS Firefox Aurora/20 および Chrome の最新の安定版でテスト済み)

したがって、この結果が開発者が通常望んでいるものであると仮定すると、Chrome が行うことはちょっとしたトリックだと思います。

しかし、コードの読み方:

  • s の高さは、そのtd子のフォント サイズと行の高さによってのみ定義されます。子供の 100% の高さは、親によって決定されます。
  • に高さを追加すると、ビューポートを参照する 100% の高さtdが得られますtd(Firefox の場合 - IE の場合だと思います)。これは、ページの中央までスクロールすると、フッターとヘッダーが表示されないことを意味します。

Chrome は、これが実際には私たち (開発者) が望んでいたものではないと想定し、以下を計算して以前と同じ結果を返します。

私が言いたいのは、あなたが実際に欲しいのは：

containerHeight = 100% of page height - (headerContainerHeight + footerContainerHeight)

このフィドルで小さな JS の例を見つけてください:
http://jsfiddle.net/scheinercc/DaYCa/35/
(Mac OS Firefox Aurora/20 および Chrome の最新の安定版でテスト済み)

HTML/CSS ソリューションがあればもっと良かったのはわかっていますが、ATM が思い浮かびません。

于 2013-01-23T07:27:43.683 に答える
0

このコードを .content Css に追加するだけです

vertical-align:top;

.footer css でこのように

vertical-align:bottom;

次に、Firefox ブラウザーをテストします。クロムと同じように表示されます。

于 2013-01-12T17:50:51.043 に答える