1

まず、Internet Explorer 8 はbox-sizing: border-box; を完全に無視しているようです。ボックスにmin-heightが設定されている場合の宣言(この投稿は、https://stackoverflow.com/a/11714178/3355252を確認します)。

今、私が達成する必要があることを説明しましょう。これが私のサイトです（かなり簡略化されています）：http://jsfiddle.net/ttKP3/。Doctype は HTML 4.01 Strict です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head></head>
<body>
  <div id="header">header</div>
  <div id="main">main</div>
  <div id="footer">footer</div>
</body>

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

#header,
#footer {
  height: 100px;
}

#main {
  box-sizing: border-box;
  min-height: 100%;
  width: 300px;
  margin: -100px auto;
  padding: 100px 0;
}

私が必要とするのは、画面の一番下にあるフッターと、画面全体を上から下まで埋めるメインボックスです。また、コンテンツが大きくなると ( JSFiddle で[ Add content ] を数回クリック)、メインボックスを拡大し、それに応じてフッターを移動する必要があります。

Chrome と Firefox で問題なく表示されます。おそらく IE8 で実行することはできません (JSFiddle をレンダリングしません) が、メインのボーダー ボックスプロパティは完全に無視されるため、メインボックスは本来よりも200 ピクセル高くなります。画面の領域。

border-boxとmin-heightを使用して処理できなかったように見えるため、IE8 用の他のソリューションを探しています。私の頭に浮かんだのはcalc、つまりheight: calc(100% - 200px);を使用することだけでした。しかしIE8もそれをサポートしていません。ちなみに、 IE8で実行したときにhtml要素にie8クラスを条件付きで追加しているので、クロスブラウザソリューションは必要ありません。その特定のブラウザで目的のレイアウトを取得するためのCSSだけです。

4

1 に答える 1

0

CSS トリックに関するこのスティッキー フッターの投稿をもう一度読み、少しいじくり回した後、マークアップの変更を必要としないクリーンなソリューションを見つけました (ヘッダー、メイン、フッターの 3 つのコンテナーのみで実行できます)、 box-を使用する必要もありません。全然サイジング。IE8でも同様に動作します。

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

#header,
#footer {
  height: 100px;
}

#header {
  margin-bottom: -100px;
}

#footer {
  margin-top: -100px;
}

#main {
  min-height: 100%;
  width: 300px;
  margin: 0 auto;
}

/* Space for header and footer. */
#main:before,
#main:after {
  display: block;
  content: "";
  height: 100px;
}

headerとfooterの代わりにmainにマージンを適用したい場合があります。

このソリューションを適用した私のフィドルは次のとおりです。http://jsfiddle.net/ttKP3/1/

于 2014-03-31T13:00:50.703 に答える