CSSで下まで背景色を伸ばす方法

質問

<div ckass="Container">
<div class="Left"></dvi>
<div class="Right"></dvi>
</div>

html, body { height:100%;}
.Left-Section{height: 100%;min-height: 100%; }
.Right-Section{height: 100%;min-height: 100%; }
.Container{height: 100%;min-height: 100%;}

と設定しているのですが、div class="LEFT"とclass="Right"の背景色がページ下まで伸びず困っています。
どうしたらいいのでしょうか？

回答No.1

metametamu · ベストアンサー

とりあえずclass名が対応していないので直して、min-heightを使う場合はハックをかませる方が良いと思います。

.Left{
height:auto !important;
height:100%;
min-height:100%;
}

名前がLeft、Rightとなっているので、floatなどで横に並べられているのでしょうか？
heightは崩れの原因になりやすいので、その場合html要素に背景画像をrepeat-yで並べて、ボックスが下まで伸びているように見せる方がいいんじゃないでしょうか。

html{
background:url(image.jpg) repeat-y center top;
}

お礼

回答ありがとうございます。
じっさいにはfloatで回り込みを指定して左右に表示しています。

>class名が対応していないので

これはいったいどういうことでしょうか？

回答No.3

ORUKA1951

＞<div ckass="Container">
＞<div class="Left"></dvi>
　^^^^^－－－－－－－^^^^※/<div>って何ですか。これじゃ要素が閉じられない・・
＞<div class="Right"></dvi>
　^^^^^－－－－－－－^^^^※/<div>って何ですか。これじゃ要素が閉じられない・・
＞</div>

.Left-Section{height: 100%;min-height: 100%; }
↑
　クラスセレクタを指定されていますが、上のHTMLにそのようなクラスはないです。あるのはLeftです。

お礼

下記の通り、こちら側のミスです。

回答No.2

metametamu

<div ckass="Container">
<div class="Left"></dvi>
<div class="Right"></dvi>
</div>

となっていますが、CSS側でのセレクタはLeft-Sectionとなっています。
多分書き間違いだとは思いますが、閉じタグもdviになっていますし。

お礼

これは大変失礼しました。
おっしゃるとおりです。