コンテナの高さ 100% の絶対配置レイアウト_CSS/HTML

コンテナーの高さ 100% は頻繁に使用される要件であり、これはどのコンテナーでも達成でき、ネスト関係は必要ありません。

ボディをコンテナとして、また内部オブジェクトの上部ラベルとして考えてください。その高さを 100% に設定することが重要です。

最も基本的な例

* { margin:0; padding:0; border:0;}
html,body { height:100%;} /* FF 互換性のための html も設定します */
#box_2 {高さ:100%; 背景:#000;}

オーバーラップ位置効果

#box_1 { 位置: 絶対; 左: 0; 幅: 100%; z-index:2; }
#box_2 { 位置:絶対; 左:0; 幅:100%; z-インデックス:1;}
垂直相対高さ効果

#box_1 { 位置: 絶対; 左: 0; 幅: 100%; 高さ: #f00; }左:0; 上:30%; 高さ:#000;}

水平相対幅効果

#box_1 { 位置: 絶対; 左: 0; 幅: 100%; 背景:#f00; }上:0; 右:0; 幅:100%; z-インデックス:1;}
このレイアウトにはフロートは必要なく、多くのバリエーションがあります:

1、N 列レイアウト
2、N 行レイアウト
3、N 列 + N 行クロス レイアウト

FF で相対サイズのコンテナ ページを参照する場合、ウィンドウ サイズが調整されるとコンテナ サイズもリアルタイムで調整されますが、IE はウィンドウが調整された後にのみ有効になることに注意してください。

IE5.0/IE5.5/IE6.0 および FF1.5 テストに合格