HTML5元素只能扩展到窗口大小

Question

我正在整理一个HTML5页面。我注意到在“header”和“footer”等元素中没有指定宽度的div只填充窗口的宽度。所以，例如，如果你有：

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

你将窗口的大小减小到960px以下（例如600px）并水平滚动，“header-background”只能拉伸到600px，而右边则是一个空白区域。

即使在stackoverflow.com上，您也可以看到这一点

有解决方法吗？

Answer 1

默认情况下，任何块级元素都占用页面宽度的100％。如果你有一个你不能（或不想）的宽度，那么你可以使用min-width

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