css - HTML5 元素仅拉伸到窗口大小

Question

我正在整理一个 HTML5 页面。我注意到在“页眉”和“页脚”等元素中没有指定宽度的 div 只会填充窗口的宽度。因此，例如，如果您有：

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

并且你将窗口的大小减小到 960 像素以下（例如 600 像素）并水平滚动，“标题背景”只会拉伸到 600 像素，右侧将是一个空白区域。

您甚至可以在 stackoverflow.com 上看到这一点

有没有解决的办法？

Answer 1

默认情况下，任何块级元素都将占据页面宽度的 100%。如果您的宽度不能（或不想）低于，那么您可以使用min-width

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