低価格、短納期、高品質なWebサイト制作|ScuderiaWeb

floatしたdivの高さを揃える

tableレイアウトからdivのfloatによるレイアウトに変更した際に、デザイン面で困ることがいくつかありますが、その1つが、floatしたdivの高さが揃わないこと。
floatしたそれぞれのdivに背景画像や背景色を設定していたり、borderでラインを入れている場合など、高さが揃わないため、情報量が少ないdivの下に隙間が空いてしまいます。
そういった問題を解決する方法です。

サンプル

floatしたdivの高さを揃える　高さが可変（別ウィンドウで表示）
floatしたdivの高さを揃える　高さ画面いっぱい（別ウィンドウで表示）

ソース（高さが可変）

floatされたdivの中で、もっとも高さがあるものに他のdivの高さも合わせる場合です。
float解除用のclass="cl"についてはfloat解除を参照してください。

CSS

html,body {
	margin: 0;
	padding: 0;
	height: 100%;
}
div#boxArea {
	overflow: hidden;
	height: auto;
	width: 600px;
}
div#boxArea div {
	float: left;
	padding-bottom: 32767px;
	margin-bottom: -32767px; 
}
div#boxArea div#one {
	width: 200px;
	background: #376C85;
}
div#boxArea div#two {
	width: 200px;
	background: #4E9ABE;
}
div#boxArea div#three {
	width: 200px;
	background: #7EC4E6;
}

XHTML

<div id="boxArea" class="cl">
	<div id="one">
BOX1
	</div>
	<div id="two">
BOX2<br />
BOX2<br />
BOX2<br />
BOX2<br />
BOX2<br />
BOX2<br />
BOX2<br />
BOX2<br />
BOX2<br />
END
	</div>
	<div id="three">
BOX3<br />
	</div>
</div>

div#boxArea divのpadding-bottomとmargin-bottomに指定している32767の値は変更して構いません。ブラウザの高さよりも大きな値を設定してください。
但し、ブラウザが理解できる値は-32767～32767ですので、その範囲外の数字は指定しないでください。

ソース（高さ画面いっぱい）

floatされたdivの高さが画面高さより小さい場合に、画面高さいっぱいにdivの高さを広げる場合です。(X)HTMLの内容は高さが可変の場合と同じです。
float解除用のclass="cl"についてはfloat解除を参照してください。

CSS

html,body {
	margin: 0;
	padding: 0;
	height: 100%;
}
div#boxArea {
	overflow: hidden !important;
	overflow: visible;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 600px;
}
div#boxArea div {
	float: left;
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	padding-bottom: 0;
	margin-bottom: 0; 
	height: 100%;
}
div#boxArea div#one {
	width: 200px;
	background: #376C85;
}
div#boxArea div#two {
	width: 200px;
	background: #4E9ABE;
}
div#boxArea div#three {
	width: 200px;
	background: #7EC4E6;
}

div#boxArea divのpadding-bottomとmargin-bottomに指定している32767の値は変更して構いません。ブラウザの高さよりも大きな値を設定してください。
但し、ブラウザが理解できる値は-32767～32767ですので、その範囲外の数字は指定しないでください。