KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > Divの高さを揃える方法 (css版)

Divの高さを揃える方法 (css版)

先日Javascriptでカラムの高さを揃えるというエントリーをしたのだが[CSS]高さの異なるカラムを揃えるスタイルシートでCSSで高さを揃える方法が紹介されている。

肝はpadding-bottomとmargin-bottomに指定する+-32768px。こんなやり方もあったんだと感心させられる。

HTMLサンプル

HTML
  1.  <div id="CssBlock01">
  2.   <div id="CssLeft">
  3.    <h5>左側</h5>
  4.    <p>CSSで高さをそろえるテスト</p>
  5.   </div>
  6.  
  7.   <div id="CssCenter">
  8.    <h5>中央</h5>
  9.    <p>CSSで高さをそろえるのはなかなかムツカシイのでこの方法でできるとなるとすごく便利だと思われる。</p>
  10.   </div>
  11.  
  12.   <div id="CssRight">
  13.    <h5>右側</h5>
  14.    <p>てすと</p>
  15.   </div>
  16.  </div>

CSSサンプル

CSS
  1.  #CssBlock01 {
  2.   background-color: #CCCCCC;
  3.   width: 450px;
  4.   padding: 10px;
  5.   border: 5px solid #000000;
  6.   overflow: hidden;
  7.  }
  8.  #CssBlock01 div {
  9.   float: left;
  10.   margin-right: 5px;
  11.   margin-left: 5px;
  12.   width: 120px;
  13.   border: 1px solid #FFFFFF;
  14.  }
  15.  #CssLeft {
  16.   background-color: #99CCCC;
  17.   padding-bottom: 32768px;
  18.   margin-bottom: -32768px;
  19.  }
  20.  #CssCenter {
  21.   background-color: #99CC99;
  22.   padding-bottom: 32768px;
  23.   margin-bottom: -32768px;
  24.  }
  25.  #CssRight {
  26.   background-color: #CC9999;
  27.   padding-bottom: 32768px;
  28.   margin-bottom: -32768px;
  29.  }

親要素には「overflow: hidden;」、子要素に「padding-bottom: 32768px;」と「margin-bottom: -32768px;」を指定することで下記のようになる。

実行結果

左側

CSSで高さをそろえるテスト

中央

CSSで高さをそろえるのはなかなかムツカシイのでこの方法でできるとなるとすごく便利だと思われる。

右側

てすと

原理的に子要素の下のボーダーを表示することは出来ないと思われる。また親要素の下とくっついてしまうのにも注意。もっとも解決する方法があるかもですが。

そこらへんがOKなパターンであれば利用価値は大ですね。横の値としても使えそうだしリキッドレイアウトが楽に出来そう。

XHTML/HTML+CSSスーパーレシピブック
作者:エ・ビスコム・テック・ラボ | 価格:¥ 2,940

トラックバック(3)

2008年8月26日 13:24

WEBプログラム覚書::Divの高さを揃える方法 (css版)bookmark!!!

divの高さが揃えられないときに使えるCSS。今、実験中だけど、少しIEでうまくいかないです><続きを読む

2009年1月29日 16:59

Divの高さを合わせるスクリプトWEBプログラム覚書

Javascriptを利用してDivの高さを合わせる続きを読む

2009年1月29日 17:00

Divの高さを合わせるスクリプト(safari対応版)WEBプログラム覚書

Divの高さを合わせるスクリプト(safari対応版)続きを読む

コメント

コメントする
Name
Email Address
URL
TIME LINE
2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24
2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

2012
01.21

[PHP]共有サーバーユーザーのためのPEARインストール方法

共有サーバーでは自由にPEARのパッケージがインストールできないので、 プロジェクトローカルに設置することになりますが、以前httpベースのものを使ってみたんですけど、 やたら重くて使い物にならなかったので、僕は普通にFTPでアップするようにしてます。

ってことでプロジェクトローカルへのPEARのインストール方法。