DIV+CSS クラシック レイアウト [幅適応] [自動画面中央揃え]_html/css_WEB-ITnose

ヘッダー

分析:

最も外側のラッパーは内部にすべてのコンテンツをネストしており、全体的な配置は相対的です。 max min はすでに最も狭い値と最も広い値をうまく制御していますが、IE には影響しません。他のレイアウトが散在していない場合、この層は実際に本体内に記述することができ、ネスト層が 1 つなくなります。

#wrapper{ 幅:自動; 境界線:1px; 最大幅:1000px; マージン-右:自動; }

ラッパー 下位レベルの外側のヘッダー フッター

ヘッダーは絶対配置され、フッターは相対的に配置されます。これは、非 IE との互換性の鍵となります。

#outer{ margin-left:130px; margin-right:130px; border-left:1px ソリッド #000; }
#header{ 位置:absolute; 上:0; 幅:100%; 境界線:1px; 背景:#0ff;フォントサイズ:xx-large}
#フッター { 幅:100%; ライン高さ:50px; 背景:#ffc; center;position:relative;}

outer lower-level clearheader externalwrap right clearer

clearheader は、ヘッダーの空白を埋めるために使用されます。 Clearer は、一般的に使用される埋め込みハックです。
アウターラップの幅が 100% ではなく 99% なのはなぜですか?
その上部の外側のレイヤーには境界線があるため、100% の幅と 2 つの境界ピクセルを追加すると拡張され、FF には明らかな効果があります。
右側の処理は非常に古典的で、IE では位置決めとして、FF ではフローティングとして解決されます。ネガティブマージンの処理でも、上部の外側によって残されたスペースのみが使用されます。

#clearheader{ height:72px;}
.outerwrap { float:left; width:99%;}
#right {
position:relative;
width:130px;
margin-right :-129px;
}
* html #right { margin-right:-130px; margin-left:-3px}
.clearer{ オーバーフロー: 隠し:-1px; }

アウターラップでセンターコンテンツをより明確に残すというアイデアは、上記と似ています。

IE5.0以降のブラウザが有効であることを明記

IE5.0以降の幅条件を式メソッドで制御し、幅と中央を自動調整します。ここで auto を使用すると、ウィンドウのサイズ変更プロセス中に div コンテンツが表示されなくなるため、幅の値を修正しました。

body {
width:expression( documentElement.clientWidth }
#wrapper {
width:expression( documentElement.clientWidth }

この例は、DIV+CSS の多くの古典的な使用法と定義を組み合わせたもので、非常に伝統的であると同時に実用的です。

フッター

コード
1
2
3
4
5
6
7
8
9