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なパターンであれば利用価値は大ですね。横の値としても使えそうだしリキッドレイアウトが楽に出来そう。
実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
/ 金額 : ￥ 3,360
kantenna.com 最新更新ページ
- [2009/07/04]WordPressメモ3
- [2009/07/03][基礎]Action Script3.0 メモ 1
- [2009/07/01]Ajaxメモ
- [2009/06/27]RewriteRule Tフラグ
- [2009/06/26]mod_rewriteメモ
Divの高さを揃える方法 (css版)タグ:
トラックバック
- http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/391
- [bookmark!!!]2008年08月26日 13:24
- WEBプログラム覚書::Divの高さを揃える方法 (css版)
- divの高さが揃えられないときに使えるCSS。今、実験中だけど、少しIEでうまくいかないです＞＜
- [WEBプログラム覚書]2009年01月29日 16:59
- Divの高さを合わせるスクリプト
- Javascriptを利用してDivの高さを合わせる
- [WEBプログラム覚書]2009年01月29日 17:00
- Divの高さを合わせるスクリプト(safari対応版)
- Divの高さを合わせるスクリプト(safari対応版)
- [2009/07/03][基礎]Action Script3.0 メモ 1
- [2009/07/01]Ajaxメモ
- [2009/06/22]jQueryのプラグイン作成前のメモ
- [2009/06/04]jQuery プラグイン Slide boxメモ
- [2009/05/27]jQuery fade() と pngbehavior.htc