一部の Web ページで、ブラウザー ウィンドウのサイズを変更すると、div の後に (特にヘッダーとフッター領域に) 空白が追加されるのを見てきました。私は解決策がそれらの領域に最小幅を使用していることを発見しました。
私が言った問題を確認するには、Stack Overflow.com の任意のページ (たとえば、今読んでいるページ) のサイズを変更してください。この問題を抱えた多くのサイトを見てきました。
しかし、なぜそうなのですか？なぜそれが必要なのですか？Div はブロック要素であり、幅が定義されていない場合はこの親の幅に引き伸ばす必要があるため、ヘッダーとフッターは空白なしで 100% にする必要があります。
スクリーンショットは次のとおりです。
はい、ブロック レベルの要素として、相対的なコンテナーの幅まで伸びます。つまり、静的でない位置またはディメンションを持つ親またはコンテナーです。ディメンションまたは位置が設定されている要素が階層内にない場合は、ウィンドウが使用されます。<html>要素と要素は、<body>実際にはデフォルトで幅が基づいている要素ではありません。デフォルトでは、ウィンドウはブロック*である<html>and<body>要素のサイズを実際に設定しており、その子がその外側で実行されていても、要素はさらに小さくなります。
<body>したがって、ページのコンテンツが最後まで実行されているにもかかわらず、要素のサイズが小さくなっています。
* 注:<html>と<body>は実際にはブロックではありませんが、この目的のためにブロック レベルと考えることができます。
