あるお客さんでヘッダやフッタの背景が切れていると言われました。
確かに横スクロールすると背景が切れてしまいます。
制作サイドがモニターが大きいと、この現象に気づきにくいが、逆にノートパソコンや解像度が小さいモニターで確認しているお客さんの方が気づきやすいかも。。
これはほとんどのブラウザで起こる現象で、IE・Firefox・Chrome・Opera壊滅です。
解決方法はボックスにwidth:100%が入っているところに個別にmin-widthを指定すると解決できます。
#header,
#footer{
widht:100%;
min-width:900px;
}
ただヘッダやフッタなどwidth:100%が複数ある場合にmin-widthをその都度いれるのが少しめんどくさい。。。
またIE6はきかないので対応するためにJavaScriptを使用しないといけません。
一番シンプルな方法は、コンテンツ幅と同じ幅をbodyにmin-widthを入れてあげたら問題なく解決します。
複数min-widthをいれることもなく、IE6でもなぜかJavaScriptを使用していないのに大丈夫です。
width:100%のデザインをする場合には必須ですな。
body{
min-width:900px;
}
参考
- Newer: メニューを拡大しながら消えて別ページにリンクしたい
- Older: IEやChromeも使えるFirebug Liteをいれてみる
Comments:3
- manabu 2011年12月 8日 07:16
はじめまして。
いつも拝見させていただいております。
IE6で解決版デモを見ても横スクロールすると背景が切れてしまうようなのですが自分だけでしょうか？
確認していただければ幸いです。-
depthcode
2011年12月 8日 13:31
manabuさん
はじめまして。コメントありがとうございます。
こちらも試してみました。
確かにIE6は下記感じで、manabuさんと同じ症状がでますね。■サンプル1
画面を広いままで開く→画面を狭くする→横スクロールすると背景が途切れる
画面を狭いままで開く→横スクロールしても背景が途切れないhttp://depthcode.com/css/minwidth/index2.html
■サンプル2
いつも案件で実装してるのは背景100%指定するボックスの中には、
幅指定したレイアウト用のボックスがありまして
背景単独で使うことがなかったので気づきませんでした。
幅指定した中のボックスがつっかえ棒となり背景が途切れないはずです。http://depthcode.com/css/minwidth/index3.html
■サンプル3（minmax.js使用）
もし背景を単独で使われる場合（ボックスがない場合）で気になる場合には
JSを使われる方法がいいのかなと思います。- manabu 2011年12月 8日 17:53
ご丁寧なご回答ありがとうございます。
サンプル2のように背景100％指定したボックスの中に幅指定したボックスを作ることで解決できました。
仰られるとおり背景を単独で使うこと（ボックスを入れないこと）はあまりないので、
幅指定したボックスを入れて試してみればよかったと反省しています。
デモページだけを見て背景が途切れると判断してしまいました・・・。
ご面倒おかけ致しました。
最後にいつも役立つ情報をわかりやすく解説していただきありがとうございます。
これからも色々と勉強させていただきます。
Trackbacks:1
- TrackBack URL for this entry
- http://depthcode.com/mt/mt-tb.cgi/28
- Listed below are links to weblogs that reference
- ブラウザの横スクロールしたら背景100%のヘッダやフッタが切れてしまう from DEPTHCODE
- 小さい画面だとページの端が切れる！？ from 徒然なるままに・・・ 2010-12-03 (金) 22:05
- 今日、仕事で前に作ったサイトの修正の連絡が。。 ノートパソコンなどの小さな画面でそのページを開くと、 右端が白く消えてしまう・・・という話で。 ブラウザ...