背景が下まで表示されないんです。

質問

サンプルサイトを製作中です。どうしても直せない現象があるので
仮アドレスでup致しました。スクロールすると背景が途切れてしまします。
原因として html.body.wrapper に　height: 100%;　としている事と
関係があると思うのですが。スクロールしても表示されるようにしたいので
知恵をお貸しください。
途中の状態でのupで心苦しいのですが、以下のサイトになります。

http://greencampus.web.fc2.com/

回答No.3

abril · ベストアンサー

No.2です。補足を拝見しました。

【B】なら割と簡単です。
下記の修正で、トップスページ（http://greencampus.web.fc2.com/index.htm）がFirefox2/3、IE6/7、Safari3/4、Opera9.61にて【B】の状態で表示される事を確認しています。

----------------------------------------------------------------------
【base.css】修正が必要なセレクタのみ抜粋（「※～」以下は注釈ですので実際の使用の際は削除を）
----------------------------------------------------------------------
html, body {※(1)
height: 100%;
min-height: 100%;
}

body{※(2)
font-size: 0.75em;
color: #555;
line-height: 1.2em;
text-align: center;
}

#wrapper{※(3)
width: 774px;
height: 100%;
min-height: 100%;
margin: 0px auto;
background: url(../images/bg-main.gif) repeat-y;
text-align: left;
}

body > #wrapper {※(4)
height: auto;
}

#wrap-main{※(5)(6)
width: 760px;
margin: 0px auto;
}

#contens{※(6)
clear: both;
padding: 0px 20px;
}

#sidebar{※(6)
float: left;
width: 148px;
}

#page-right{※(6)
float:right;
width: 540px;
position: relative
}

#footer {※(6)
clear: both;
padding-top: 25px;
text-align: center;
}
----------------------------------------------------------------------
(1)"height: auto !important;"は不要です。
(2)本来は不要なのですが、質問者様のXHTML文書ではIE6が後方互換モードに切り替わってしまう為、"text-align: center;"を併用してIE6のこのモードでもwrapperコンテナがセンタリングされる様、配慮しています。IE6を対象としないなら"text-align: center;"は勿論いりません。
(3)
・"height: 100%;"では、コンテンツのボリュームが少ない時にはIE6しかbg-main.gifがウィンドウサイズ一杯に伸びてくれません。"min-height: 100%;"を併用します。なお、IE6はこのmin-heightが効きませんが、"height: 100%;"の方で同様の挙動をするので併用する事で問題点をクリアできます。
・backgroundプロパティの様に、一括指定ができるものはまとめた方が記述もすっきりしますし、カスケーディングもわかりやすいのでベターです。
・(2)でコンテンツ全体に"text-align: center;"が適用されてしまったので、wrapperコンテナ内を"text-align: left;"に戻します。
(4)子供セレクタ">"（直接の子要素にのみ適用）を使用して、bodyに対するwrapperコンテナを"height: auto;"とする事で、ウィンドウサイズの拡大縮小にかかわらずwrapperコンテナの垂直方向の描画領域が常にbodyの領域一杯になります。例によって、IE6はこのセレクタも無視するのですが、IE6ではバグによりwrapperコンテナの"height: 100%;"で同様の挙動をしているのでごまかせます。
(5)"text-align: left;"は(3)でwrapperコンテナの方に適用したので不要になります。
(6)"height: 100%;"は不要です。

いかがでしょうか。不具合等ありましたらまた補足して下さい。

なお、

> 使用ブラウザはFirefox3.0 IEはmacなので現状5.2でしか確認してません。

Mac版IEは開発を中止して既に何年にもなりますし、最後のver. 5.2も山のようにCSS関連のバグを抱えているので、もう無視して下さい。
近年購入されたMacにはもうSafariしか入っていませんし、Mac版IEにまで完全に対応しようとすると、(X)HTMLのコードを煩雑にしたり、CSSを振り分けたりという非常に面倒くさい処理を抱え込む事になり、メンテナンスの上でも非効率となり現実的ではありません。
＃上記もおそらくMac版IEでは思い通りの表示にはなりませんので。

お礼

で、できました！！！ありがとうございます。１週間も悶絶していた現象が、あっさりと！
とても中途半端な状態のサイトにも関わらず、丁寧に回答と解説を頂いてありがとうございました。とてもとても分かりやすかったです。
お礼が賞賛の言葉を綴るしかできないのが残念なぐらいです。本当にありがとうございました。また、これで挫けず仕上げられそうです！！

回答No.4

abril

No.3です。
”IE6を考慮に入れる”のであれば、一部訂正を。

【訂正】
#wrap-main{
width: 760px;
margin: 0 0 0 7px;
text-align: left;
}

先に申し上げた通りIE6の後方互換モードでは、"margin: auto;"が無効の為、子要素のheaderコンテナとfooterコンテナが左右均等の余白をとって描画されずにwrapperコンテナの左端から描画されてしまう為、結果左端が7px分bg-mainに重なってしまい右端が7px余分に空いてしまう事になります。
これを回避するには、左右marginをautoにするのではなく、実際の数値（(774px－760px)÷2＝7px）を左marignとして設置すれば、結果的にmarginをautoにした場合と同じ描画になります。

ちなみに。

> body に背景bg-mainを設定したら下までは表示されたのでが、背景位置を　background-position: center;　として、wrapper-mainの左右 margin: auto;と設定すると　ヘッダーフッダーの画像が背景画像のラインから1px左にはみ出る現象が起きてしまった

このやり方でも、こういった不具合は（"margin: auto;"の効かない）IE6以外の環境では確認されなかったのですが。

回答No.2

abril

> スクロールすると背景が途切れてしまします。

サンプルサイトの見え方がUA（ブラウザ）によってかなり異なる（IE6と、IE7と、Firefox2/3、だけでもそれぞれ異なっています）ので、どの状態の事を仰っているのか今ひとつわかりかねるのですが…

もしかして単に、ウィンドウサイズの大きさやコンテンツのボリュームがいかなる場合も背景画像bg-main.gifがウィンドウの縦方向の領域一杯に表示されているという状態をご希望なのでしょうか？その場合も、大きく分けて下記の様な2パターンが考えられるのですが。

【A】
メインのコンテンツである<div id="contens">～</div>の内容のボリュームが：
少なく、ウィンドウサイズよりも短い位置で縦方向の描画が終わる（スクロールバーが発生しない）場合は、<div id="contens">～</div>の下部の余白が伸びて<div id="footer">～</div>がウィンドウの下端に表示される
多く、ウィンドウサイズよりも長い位置で縦方向の描画が終わる（スクロールバーが発生する）場合は、<div id="contens">～</div>の描画が内容いっぱいで終わった位置から<div id="footer">～</div>が表示される。

【B】
<div id="footer">～</div>は<div id="contens">～</div>の内容が終わったところで表示されるだけで構わない（コンテンツの縦方向のボリュームよりウィンドウサイズの方が大きい場合はフッターがウィンドウ下端には表示されない）が、背景画像bg-main.gifはウィンドウの下端まで常に伸びていて欲しい。

【A】【B】いずれでしょうか？
それとももっと違う事を問題にしておられるのでしたら、具体的に補足して下さい。

補足

早速の回答ありがとうございます！！
正直Aもご指南頂きたいのですが、今回【B】の方法を教えてください。

ただ試しに body に背景bg-mainを設定したら下までは表示されたのでが、
背景位置を　background-position: center;　として、wrapper-main
の左右 margin: auto;と設定すると　ヘッダーフッダーの画像が背景
画像のラインから1px左にはみ出る現象が起きてしまったので、
できればそれ以外の方法をお願いしたいのですが…。
（これは　center　と auto のウィンドウ端からの位置概念が違う
からでしょうか。それとも画像幅が760pxが問題でしょうか。）
画像幅は全てジャスト760pxにしてのに、pxをFirefoxに揃えるとopera
やsafariでおかしくなります。

使用ブラウザはFirefox3.0 IEはmacなので現状5.2でしか確認してません。
（macは5以降サポートされなくなってしましました。）
補足ついでに疑問も追加してしましましたが、上手くお伝えできた自信
が無いので【B】の！【B】のご指南どうか宜しくお願いします！

回答No.1

noname#119957

firefoxで正常ですが。。

スクロールすると背景が途切れてしまします。
>>何処をスクロールしてみれば現象が確認できるんでしょうか？