Divの高さを揃える方法 (css版)
パーマリンク | 2007年10月30日 22:21
先日Javascriptでカラムの高さを揃えるというエントリーをしたのだが[CSS]高さの異なるカラムを揃えるスタイルシートでCSSで高さを揃える方法が紹介されている。
肝はpadding-bottomとmargin-bottomに指定する+-32768px。こんなやり方もあったんだと感心させられる。
HTMLサンプル
<div id="CssBlock01">
<div id="CssLeft">
<h5>左側</h5>
<p>CSSで高さをそろえるテスト</p>
</div>
<div id="CssCenter">
<h5>中央</h5>
<p>CSSで高さをそろえるのはなかなかﾑﾂｶｼｲのでこの方法でできるとなるとすごく便利だと思われる。</p>
</div>
<div id="CssRight">
<h5>右側</h5>
<p>てすと</p>
</div>
</div>
CSSサンプル
#CssBlock01 {
background-color: #CCCCCC;
width: 450px;
padding: 10px;
border: 5px solid #000000;
overflow: hidden;
}
#CssBlock01 div {
float: left;
margin-right: 5px;
margin-left: 5px;
width: 120px;
border: 1px solid #FFFFFF;
}
#CssLeft {
background-color: #99CCCC;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#CssCenter {
background-color: #99CC99;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#CssRight {
background-color: #CC9999;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
親要素には「overflow: hidden;」、子要素に「padding-bottom: 32768px;」と「margin-bottom: -32768px;」を指定することで下記のようになる。
実行結果
左側
CSSで高さをそろえるテスト
中央
CSSで高さをそろえるのはなかなかﾑﾂｶｼｲのでこの方法でできるとなるとすごく便利だと思われる。
右側
てすと
原理的に子要素の下のボーダーを表示することは出来ないと思われる。また親要素の下とくっついてしまうのにも注意。もっとも解決する方法があるかもですが。
そこらへんがOKなパターンであれば利用価値は大ですね。横の値としても使えそうだしリキッドレイアウトが楽に出来そう。
トラックバック
- http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/182
2008年08月26日 13:24
- WEBプログラム覚書::Divの高さを揃える方法 (css版) [bookmark!!!]
- divの高さが揃えられないときに使えるCSS。今、実験中だけど、少しIEでうまくいかないです＞＜ >> 詳しくはこちら
最新更新ページ
- 2008/09/08sprintf()メモ
- 2008/09/05一定時間でsession終了メモ
- 2008/08/203ds MAX プラグイン Greeble
- 2008/08/13RSS 3Dデータ
- 2008/07/09PHP ファイルのオープンと読み込み
