しーぼーデザイン since 2003

blog ブログ

headerやfooterでwidthを100%にした時の注意点

2014.02.23

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

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;
}

で、全て解決!

関連記事

Archive

Category

Recent Entry