これは、こないだのフッター / コンテンツの高さが少なくてもブラウザ下部に表示させるでも試していて、安易にdivを入れ子にしてみたら上手くいったようにみえて
ええ!こんなに簡単に実装できちゃっていいのかい?
なんて思ってたんですけど、実際は早とちりで。

ブラウザ幅をコンテンツ分の固定幅より縮めてスクロールバーが表示させ右にスクロールさせると背景が切れるという問題を見つけました。とほほ。

(*ちなみにこんなソース)

先に解決法を書くけど

コンテンツ部分のwidth(固定幅)と同じサイズのmin-widthをbodyに指定すればいいみたい

文章じゃどんな現象か分かりづらいので画像で解説

ページ全体
[image]対策なし・スクロールなし

表示を縮めて意図的に横スクロールバーを発生させた状態
[image]対策なし・意図的に横スクロールバーを発生させる

右側にスクロールさせると問題発生、背景が切れてる。
[image]対策なし・意図的に横スクロールバーを発生させてスクロールさせ、問題発生中

以下でも確認出来ます。
DEMO:コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。

解決案

最初に書いたけどこんな感じ

今回は中身をセンタリングさせる話なのでdivを入れ子にしてるけど、入れ子じゃなくても再現できる。

対策済み / ページ全体
[image]対策済み・スクロールなし

横スクロールさせてみた結果
[image]対策済み・横スクロールさせた

対策後のソースは以下のページで確認出来るッス
DEMO:コンテンツブロック毎に異なる背景をブラウザ幅いっぱいまで表示させ、内包物はセンタリングするテスト。

気づいたこと思ったこと

最初min-widthを、bodyの他に背景を指定した要素全部(#top,#header,#contents,#footer)に指定してたけど、よくよく考えたら通常はbodyだけで大丈夫ぽい。
ただし折り返しせず要素を突き破るようなテキストがある時は困ったことになる。

あとIE6はmin-widthが効かないけどそもそも背景が切れないという「ええ!あんなに大きな地震だったのに目が覚めなかったのかい?」みたいな感じで頼もしいのか頼れないのかIEらしい。


2 thoughts on “コンテンツはセンタリングしつつ、ブロック毎の背景をwidth100%で表示させて横縞にする(横スクロール時に背景が切れる問題解決版)。

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.