Solarized
HOME > WEBプログラム覚書 > Divの高さを揃える方法 (css版)
Divの高さを揃える方法 (css版)
先日Javascriptでカラムの高さを揃えるというエントリーをしたのだが[CSS]高さの異なるカラムを揃えるスタイルシートでCSSで高さを揃える方法が紹介されている。
肝はpadding-bottomとmargin-bottomに指定する+-32768px。こんなやり方もあったんだと感心させられる。
HTMLサンプル
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サンプル
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で高さをそろえるのはなかなかﾑﾂｶｼｲのでこの方法でできるとなるとすごく便利だと思われる。
原理的に子要素の下のボーダーを表示することは出来ないと思われる。また親要素の下とくっついてしまうのにも注意。もっとも解決する方法があるかもですが。
そこらへんがOKなパターンであれば利用価値は大ですね。横の値としても使えそうだしリキッドレイアウトが楽に出来そう。
| 投稿日 |
2007年10月30日 22:21 |
| カテゴリ |
HTML/CSS |
| タグ |
インターフェイス |
| トラックバック URL |
http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1127 |
2008年8月26日 13:24
divの高さが揃えられないときに使えるCSS。今、実験中だけど、少しIEでうまくいかないです＞＜続きを読む
2009年1月29日 16:59
Javascriptを利用してDivの高さを合わせる続きを読む
2009年1月29日 17:00
Divの高さを合わせるスクリプト(safari対応版)続きを読む