【テスト参加ブラウザ：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2】
【 OS ：Windows】
まずコードを見てみましょう:
コードボックスを実行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="著者" content="ちょも" />
<link rel="start" href=" http://www.14px.com " title="ホーム" />
<title>ボックス サイズ変更を使用して div 模倣フレームを実装する</title>
<style type="text/css">
* {マージン:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; オーバーフロー:隠し
html,body { 高さ:100%;}
.top { 位置:相対トップ:-100px; 背景:#f60;}
.side { 位置:相対; 高さ:100%; オーバーフロー:自動; マージン-右:0; }
.main {位置:相対;高さ:100%;}
.bottom { 位置:相対高さ:100px; クリア:両方;}
</スタイル>
</head>
<本文>
<div class="トップ">
トップ
</div>
<div class="サイド">
側
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="メイン">
主要
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="bottom">
底
</div>
</body>
</html>
[Ctrl+A すべて選択 ヒント: 最初にコードの一部を変更してから実行を押すことができます]
主要な部分:
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; オーバーフロー:隠し
原則はおそらくこれです:
整形手術の前後を比較すれば、誰もがボックスサイジング:ボーダーボックスの効果を理解できるはずです。
ボックス サイズ設定を理解している学生は、ボックス サイズ設定が Weiguo から遠く離れた CSS3 の世界から来たものであるため、IE6/IE7 がサポートされていないことを知っているはずです。しかし、私には非常に責任があるので、このデモは通常 IE6/IE7 と互換性があると言います。
なぜなら…
IE6/IE7 では、<html> のデフォルトのボックス サイズ値は border-box です (注: IE7 は少し異常で、overflow:hidden 後に意識が回復しました。通常の動作には影響しません)。このデモ）。
問題は
、
この方法を使用するかどうかです。利点と欠点を比較して、自分で決定してください。現時点では、この方法次の 2 つの主な利点があります
。最大の欠点は、柔軟性に欠けることです。IE6 がなかったら、私は間違いなく絶対配置方式を選択すると思います。
以下はアプリケーション例のデモです。
コードボックスを実行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="著者" content="ちょも" />
<link rel="start" href=" http://www.14px.com " title="ホーム" />
<title>ボックス サイズ変更を使用して div 模倣フレームを実装する</title>
<style type="text/css">
* {マージン:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; 位置:相対:非表示;
html,body { 高さ:100%;}
.top { 位置:相対トップ:-100px; 背景:#f60;}
.side { 位置:相対; 高さ:100%; オーバーフロー:自動; マージン-右:0; }
.main { 位置:相対; 高さ:#f30; マージン-左:200px; z-インデックス:2;}
.main iframe { 高さ:100%; 幅:#fff; 位置: 絶対左:0; }
.bottom { 位置:相対高さ:100px; クリア:両方;}
</スタイル>
</head>
<本文>
<div class="トップ">
トップ
</div>
<div class="サイド">
側
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="メイン">
<iframe Frameborder="0" src=" http://www.g.cn/"></iframe >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="bottom">
底
</div>
</body>
</html>
[Ctrl+A すべての選択のヒント: 最初にコードの一部を変更してから、[実行] を押すことができます]
注意すべき問題:
本体に overflow:hidden を与えないでください。本体の外側にあるものは容赦なく非表示になります。トップ/ボトム(ヘッダー/フッター)を含む
重要な点:
[100%+(N)px]の高さを生成する方法: div { height:100%; )px;} 。