人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSのheightについての質問です

すべての背景の高さをそろえたいと思っているのですが、うまくいきません
たとえば
[HTML]/////////////////
<div id="footer">
<div id="footer_left">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<div id="footer_center">
<p>Good morning</p>
</div>
<div id="footer_right">
<p>Good afternoon</p>
</div>
</div>

[CSS]//////////////////////
#footer{
overflow:hidden;
width:900px;
}
#footer_left{
float:left;
width:300px;
background:pink;
}
#footer_center{
float:left;
width:300px;
background:black;
}
#footer_right{
float:left;
width:300px;
background:orange;
}
///////////////////////////////
とした時にfooter_center,footer_rightの背景の高さをfooter_leftの高さに揃えることができませんでした


初歩的な質問で申し訳ありませんがお願いします。

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

footer_leftの内容は自動でRSS取得して表示させようと思っていますので高さは記事のタイトルの長さによって毎回違ってきます

もしheightを固定する以外の方法がありましたら、お願いします


1 ● 匿名回答1号

display: table / display: table-cell で、
下記のように指定すればお望みのものでしょう。

#footer{
 overflow:hidden;
 width:900px;
 display: table;
}
#footer_left{
 width:300px;
 background:pink;
 display: table-cell;
}
#footer_center{
 width:300px;
 background:black;
 display: table-cell;
}
#footer_right{
 width:300px;
 background:orange;
 display: table-cell;
}

firefoxなどは早くからdisplay: tableに対応していましたが、
IEは8でようやく対応しました。 IE7 のように古いブラウザまで対応したいならば、
親要素(footer)の背景に幅900pの画像を貼り付けて擬似的に見せるなどの手を使うか、
javascriptで幅を動的に変更するかといったことで対応することになります。
(背景画像のほうが多くの環境をカバーできますし、仕組みもかんたんなのでお勧めします)

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ