webデザイナーの記録室

横幅100%エリアと固定エリアで、横幅100%エリアが欠けてしまう現象

下図のようなコーディングをして、ブラウザ幅を縮めたときに横スクロールをすると、横幅100%のエリアが
欠けてしまいます。

 

ブラウザ幅が固定エリア(今回の例では960px)よりも広い場合は、下記のように表示されます。

黒いエリアが、ブロックレベルであれば、width: 100%指定をしていなくても、親要素と同じ横幅を確保します。

min-width01

ブラウザの横幅が固定エリアよりも狭くなった場合(仮に700px)、横スクロールをすると、下記のように、黒いエリアが欠けてしまいます。

 


 

この現象は、黒いエリアが横幅100%で、親要素(body)と同じを確保をしている場合には、単純に

ブラウザ幅=黒いエリアの横幅

になるため、固定エリアのサイズよりもブラウザ幅が小さい場合は、横幅が欠けてしまいます。

min-width03

 

回避するには、欠けてしまう黒いエリアに対して、min-width: 960px(幅固定と同じサイズ)を指定します。