css - HTML5 要素はウィンドウのサイズにのみ伸縮します

Question

HTML5ページをまとめています。「ヘッダー」や「フッター」などの要素内で幅が指定されていない div は、ウィンドウの幅のみを埋めることに気付きました。したがって、たとえば次の場合：

<header>
   <div id="header-background" style="background: #ddd">
      <h1 style="width:960px">Hello World</h1>
   </div>
</header>

ウィンドウのサイズを 960px 未満 (例: 600px) に縮小し、水平方向にスクロールすると、「ヘッダーの背景」は 600px までしか伸びず、右側に空白ができます。

これはstackoverflow.comでも実際に見ることができます

これを回避する方法はありますか？

Answer 1

ブロック レベルの要素は、デフォルトでページ幅の 100% を占めます。あなたが下に行けない（またはしたくない）幅を持っているなら、あなたは使うことができますmin-width

header { 
    min-width: 960px;
    width: auto; 
}