• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

float で要素を並べた場合

左サイドメニューを置いた2カラム型のサイトで、このようなレイアウトになってしまう経験もあるのではないでしょうか。
float で並べた2つの要素の高さを揃える方法

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

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

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 の記述例

続いて、HTML 側の記述例です。
<body>
<div id="container">
	<div id="sidebar">
    <p>左サイドメニュー</p>
	</div>
	<div id="contents">
    <p>右コンテンツ部</p>
    </div>
</div>
</body>
今回のデモの場合、#container の親要素に min-height:100%overflow:hidden を指定し、サイドメニュー(#sidebar)とコンテンツ部(#contents)にはそれぞれ padding-bottom:32767pxmargin-bottom:-32767px を指定します。


デモはこちらです。
float で並べた要素の高さを揃えるデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください