等しい高さの列 -- DIV+CSS での適応高さのソリューションlayout_html/css_WEB-ITnose

これは 3 行 2 列の比較的典型的なレイアウトであり、各列の高さは同じです (どの列の高さは事前に決定することはできません)。一般的な慣例によれば、これが目標です。 , ほとんどが背景画像で埋められているので、JSスクリプトを追加して列の高さを揃える この記事で紹介するのは、コンテナのオーバーフロー部分を非表示にし、列の負の境界線を結合する方法です。そして、同じ柱の高さの問題を解決するためのポジティブ内側パッチ。

最初にコードを見てください:

#wrap{	overflow: hidden;	}#sideleft, #sideright{	padding-bottom: 32767px;	margin-bottom: -32767px; 	}

実装原則: ブロック要素はコンテナーに含まれている必要があります。 コンテナ内の要素に overflow: hidden を適用します。 列のブロック要素に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 にはオーバーフローを処理するバグがあります: 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;	}}/**/

B2 of Opera9 Fixing bug 8.

テスト環境: IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2 に合格。

最終効果

原文: http://www.positioniseverything.net/articles/onetruelayout/equalheight

ご注意ください: ネチズン momomolo がテストしたところ、ページの長さが 2000px に達すると、問題が発生することがわかりました。オペラ、それはまだ起こっていません。