カテゴリー: 藤田運送

藤田運送でwidth:100%にしている箇所の背景色が一部分bodyの背景色になっている。ウィンドウを狭めるとどんどんその領域がデカくなる。

親要素に100%は依存するためらしい。

min-width:

幅100%による弊害

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

この症状の対処法は？

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

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