ブログ

ヘッダーやフッターをヨコいっぱいに表示する機会は多いと思う。
ブラウザをヨコにズーっと伸ばしていくと、それに追随して伸びていく。
まあ、当たり前と言うか普通であるが、逆にブラウザをいつも見ているサイズから縮めていった場合。
さあ、どうなるか？

bodyは100%でサイトの横幅を#wrapperや#container等で980pxに設定していたとしよう。
その外でheaderやfooterの横幅を100%に設定してあると、ブラウザが980pxを割ると、そこからは横スクロールバーが出現。
そのスクロールバーを右にスライドすれば、当然隠れた部分がそのまま出てくると思いきや…
設定していたheaderやfooterの背景が切れて下地が出ていてしまう。
これは気がつかなかった…。
そんな時は
min-widthでサイトの横幅を最低値にしてあげる。
100%とは、今、目に見えて出ている部分の全て。
スクロースで隠れてる部分は100%を越えた部分と見なされるらしい。
従って100%で設定していれば、100%以上はCSSの設定が適応されないわけだ。
CSSは

#footer{
 widht:100%;
 min-width:980px;
}

で、全て解決！