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 サイトの他の関連記事を参照してください。