[CSS]floatで並べた2つの要素の高さを揃える方法

HTML

2013.04.21

2カラムのサイトを構築する上で、高さの異なる要素（サイドメニューとコンテンツ部）をfloatで隣合わせた時に「高さを揃える」方法のご紹介です。

floatで要素を並べた場合
floatで並べた要素の高さを揃える
1. CSSの記述例
2. HTMLの記述例

floatで要素を並べた場合

左サイドメニューを置いた2カラム型のサイトで、このようなレイアウトになってしまう経験もあるのではないでしょうか。

floatで並べた要素の高さを揃える

ページの表示領域（高さ）に満たないコンテンツ量であっても、少し強引な方法にはなってしまいますが、以下の図のようにページ下部で高さを揃える方法をまとめました。

CSSの記述例

まずはCSSの記述例です。

html, body	{
	margin:0;
	padding:0;
	height:100%;
}
#container	{
	width:100%;
	color:#fff;
	margin:0 auto;
	
	min-height:100%;
	overflow:hidden;
}
#sidebar	{
	float:left;
	width:20%;
	height:100%;
	background:#888;
	padding-bottom:32767px;
	margin-bottom:-32767px;
}
#contents{
	float:left;
	width:80%;
	height:100%;
	background:#333;
	padding-bottom:32767px;
	margin-bottom:-32767px;
}

/*デザイン補足*/
p	{
	padding:10px;
	font-family: "メイリオ","Meiryo";
}

html, body {

margin:0;

padding:0;

height:100%;

}

#container {

width:100%;

color:#fff;

margin:0 auto;

min-height:100%;

overflow:hidden;

}

#sidebar {

float:left;

width:20%;

height:100%;

background:#888;

padding-bottom:32767px;

margin-bottom:-32767px;

}

#contents{

float:left;

width:80%;

height:100%;

background:#333;

padding-bottom:32767px;

margin-bottom:-32767px;

}

/*デザイン補足*/

p {

padding:10px;

font-family: "メイリオ","Meiryo";

}

HTMLの記述例

続いてHTML側の記述例です。

<body>
<div id="container">
	<div id="sidebar">
    <p>左サイドメニュー</p>
	</div>
	<div id="contents">
    <p>右コンテンツ部</p>
    </div>
</div>
</body>

<body>

<p>左サイドメニュー</p>

</div>

<p>右コンテンツ部</p>

</div>

</body>

今回のデモの場合、#containerの親要素にmin-height:100%とoverflow:hiddenを指定し、サイドメニュー（#sidebar）とコンテンツ部（#contents）にはそれぞれpadding-bottom:32767pxとmargin-bottom:-32767pxを指定します。

デモはこちらです。

float で並べた要素の高さを揃えるデモ