width:100%;のブロックを作る時の注意点

幅100%は親要素に依存する

ヘッダーやフッターの幅を100%にすることって結構あります。ただ、その場合にはウィンドウ幅に注意しないといけません。というのは、幅100%というのは”親要素”に対してなので、親ブロックが狭まるとその要素も一緒に小さくなります。

それによって何が起こるか

例えば幅100%のヘッダーブロック内に、幅720pxのメニューブロックが内包されているとします。

ソースコードはこんな感じで。余分な指定はハショってますが。

#wrap {
 width: 100%;
}
#box {
 width: 720px;
}

ウィンドウを幅720px未満まで狭めると、メニューブロック全体が表示できなくなるので、ウィンドウ下部に横スクロールバーが出現します。

この横スクロールバーを、スルスルッと横にスライドさせてみるとどうなるのか。ちょっとやってみましょう。デモページを作ったので、ウィンドウの幅を狭めてみてください。水色の背景色の部分が幅100%のエリアです。

幅100%による弊害

実際にやってみて分かることは、幅100%の親要素がどこかが大切ということ。今回、水色のブロックの親要素はbodyでした。つまり、ウィンドウ幅500pxの時の横スクロールバーをずらせば、bodyも500px、その子である水色のエリアも幅500pxということです。スクロールバーを横に動かしても、ウィンドウ幅が500pxであれば幅100%の値も500pxなので、今回のように背景が途中で見切れてしまう、という現象が起きるんですね。

この症状の対処法は?

解決方法はいたって簡単で、幅100%のブロックに「min-width」を指定してあげるだけ。例えば、今回の場合は内包ブロック720px以下にならなければいいので、以下のようにすればウィンドウ幅を狭めても720px未満にはなりません。

#wrap {
 width: 100%;
 min-width: 720px;
}

以下は、min-widthを指定した場合のデモページです。この場合は、背景が見切れずに表示されます。