気まま日記(kimamanikki)

気の向くままに、のんびり更新しますヽ(´∀`)ノ

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
08


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

DIVタグの高さを揃えるCSS

こちらの記事で、『高さの違うDIVタグを同じ高さに揃える』というスタイルシートが紹介されていました。
http://coliss.com/

これはブログとかもそうですけど、自分のHPを持ってる人なんかは結構参考になるのではないでしょうか?

設定の仕方は結構シンプル。

cssに以下の設定をしてやるだけで実装出来ます。

style.css
/* 一番外側の要素 */
#content {
	width: 700px; /* 任意の幅:これがメインの幅になります */
	margin: 0 auto; /* 任意:内部要素との幅を0pxにして中央寄せ */
	overflow: hidden; /* 必須:はみ出た要素を非表示 */
}
/* 一番外側の要素の後ろに挿入されるスタイル */
#content:after {
	content: "."; /* 最後に"."を挿入 */
	display: block; /* ブロック要素に設定 */
	height: 0; /* 高さ */
	clear: both; /* 左寄せで回り込み解除 */
	visibility: hidden; /* 要素を非表示 */
}
/* 対象のDIVタグ(サンプルは3カラムです) */
#column1, #column2, #column3 {
	float: left; /* 次要素を左寄せ */
	padding-bottom: 32768px; /* 必須 */
	margin-bottom: -32768px; /* 必須 */
}
/* 左カラム */
#column1 {
	width: 150px;
	background: #CEB460;
}
/* 中央カラム */
#column2 {
	width: 400px;
	background: #CFE1DA;
}
/* 右カラム */
#column3 {
	width: 150px;
	background: #619895;
}

ポイントは、
padding-bottom: 32768px;
margin-bottom: -32768px;
の記述。

これを指定する事で、各カラムの高さを一番長いカラムに合わせることができます。

値の意味はおそらくIEの限界値だと思いますが、詳しい事はまだお勉強中です・・・
(FireFox等では数字は必要ないみたいですが・・・)

とまぁこんな感じでカラム分けをすると、ピクセル値を考慮に入れるのが幅だけになるので、若干スッキリするのではないでしょうか?

ただ無理矢理『はみ出た部分を不可視にして』揃っているように『見せかけている』だけなので、そのあたりブラウザへの負荷とか印刷時の設定とかちょっと気になるところではありますが・・・

でもまぁカラムの高さを意識してピクセル指定したり、繰り返しの背景画像の大きさを考えたり回り込みを・・・ってのからは少しは解放されるのかな?

この方法がオススメ!とははっきりと言えないですが、ひとつの手段としてはありだと思います。

ヘッダやフッタを含めたサンプルはこちら


Comments

Leave a Comment


Body

カウンター
セルフィ

 
Twitter



 
 
クラッチ作品集
 
 
プロフィール

クラッチ

気まま日記バナー

・クラッチ
このブログの管理人

 
 
管理人へメール
メールフォームを開く
 
 
ブロとも申請フォーム
 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。