无论缩放/视图如何，都可以在整个页面上拉伸元素

Question

我正在开发一个网站，该网站的页眉一直延伸到整个页面，就像此网站和其他SE网站上的标题栏一样。在针对不同分辨率和浏览器大小测试我的CSS时，我注意到如果浏览器小于页面大小，该元素将仅填充用户的浏览器。例如，如果浏览器窗口小于960px宽（我站点的主容器的宽度）和水平滚动条出现，则标题将仅填充当前屏幕上的空间并且不会延伸到其余部分可以通过滚动条访问的页面。

我发现我并不是唯一一个患有此问题的人：StackOverflow和其他SE网站存在同样的问题。

我该怎么做才能解决这个问题？

Answer 1

诀窍是将元素设置为100％宽度，并包含与最宽的网站元素一样宽的最小宽度。

采用以下示例：

<div id="header">
  <!-- Exciting header links -->
</div>

<div id="content">
  <!-- Content that will be at most 1000px wide -->
</div>

您使用的CSS是：

#header {
  width: 100%;
  min-width: 1000px;
}

这是有效的，因为当标题总是占用可用空间的100％时和至少为1000px宽。这可以防止由宽内容生成的水平滚动条使其看起来像标题过早结束。