匿名質問者回答ポイントなし

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の高さに揃えることができませんでした

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

ログインして回答する

みんなの回答

匿名質問者
2012/10/27 16:31:42

footer_leftの内容は自動でRSS取得して表示させようと思っていますので高さは記事のタイトルの長さによって毎回違ってきます
もしheightを固定する以外の方法がありましたら、お願いします
匿名回答1号2012/10/27 21:37:23
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で幅を動的に変更するかといったことで対応することになります。
（背景画像のほうが多くの環境をカバーできますし、仕組みもかんたんなのでお勧めします）

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

みんなの回答

匿名質問者
2012/10/27 16:31:42

匿名回答1号2012/10/27 21:37:23

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

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

みんなの回答

匿名質問者 2012/10/27 16:31:42

匿名回答1号2012/10/27 21:37:23

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

匿名質問者
2012/10/27 16:31:42