[CSS]float で並べた2つの要素の高さを揃える方法
スポンサード
デモはこちらです。
float で並べた要素の高さを揃えるデモ
スポンサード
2カラムのサイトを構築する上で、高さの異なる要素(サイドメニューとコンテンツ部)をfloat で隣合わせた時に「高さを揃える」方法のご紹介です。
目次
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 の記述例
続いて、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:32767px
と margin-bottom:-32767px
を指定します。デモはこちらです。
float で並べた要素の高さを揃えるデモ
スポンサード
コメント