ホームページ > 記事 > ウェブフロントエンド > CSSレイアウト適応高さ究極メソッド
この記事では主に CSS レイアウト適応高さの究極の方法を紹介します。これには特定の参考値があります。必要な友達はそれを参照してください。
私たちのタイプセットの最終目標は、プログラマーが素早くバインドできるようにすることです。最終的な実際のデータはレンダリングと同じにすることができますが、中国語の形のページでは左と右の列の高さが不確かになることがよくあるため、2 つの列に適応する必要があります。それぞれの高さについては、解決策
を参照してください。列(どの列の高さが同じであるかを事前に決定することはできません)。これはすべての設計者が追求する目標です。一般的な方法によれば、ほとんどの方法では、背景画像を塗りつぶし、JS スクリプトを追加して列の高さを調整します。この記事では、同じ高さの列の問題を解決するために、コンテナーの使用法を紹介します。オーバーフロー部分非表示は、列の負の下部境界と正の内部パッチと組み合わせられます。
最初にコードを見てください:
#wrap{ overflow: hidden; } #sideleft, #sideright{ padding-bottom: 32767px; margin-bottom: -32767px; }
実装原則:
ブロック要素はコンテナに含まれている必要があります。
コンテナ内の要素にオーバーフローを適用: 非表示にします。
列のブロック要素にpadding-bottom(十分な大きさの値)を適用します。
列のブロック要素に margin-bottom (十分な大きさの値) を適用します。
padding-bottom は列を同じ高さに引き伸ばし、負の margin-bottom は列を一番下の開始位置に戻します。同時に、オーバーフロー部分が非表示になります。
すべてのブラウザと互換性があります
IE Mac 5
非常に正確なので、上記のコードを除外してください。
/*\*/ #sideleft, #sideright{ padding-bottom: 32767px; margin-bottom: -32767px; } /**/
Opera
1. Opera7.0-7.2 はオーバーフロー部分を正しくクリアできないため、次を追加する必要があります:
/* easy clearing */ #wrap:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } #wrap { display: inline-block; } /*\*/ #wrap { display: block; } /* end easy clearing */ /*\*/
2. Opera8 には overflow: hidden の処理にバグがあり、次のコードを追加する必要があります。
/*\*/ #sideleft, #sideright { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } @media all and (min-width: 0px) { #sideleft, #sideright { padding-bottom: 0 !important; margin-bottom: 0 !important; } #sideleft:before, #sideright:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; } } /**/
3.Opera9 B2 はバグ 8 を修正中です。
テスト環境: IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2 に合格しました。
以上がCSSレイアウト適応高さ究極メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。