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

【问题标题】：Stretch Element Across Entire Page, Regardless of Zoom/View在整个页面上拉伸元素，无论缩放/视图如何
【发布时间】：2012-02-25 08:50:01
【问题描述】：

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

事实证明，遇到这个问题的不止我一个人：StackOverflow 和其他 SE 网站也有同样的问题。

我能做些什么来解决这个问题？

【问题讨论】：

在 SO 这可能是一种风格选择。如果您有萤火虫，您可以在#header 样式上找到width: 960px 并禁用它，使页眉延伸到整个页面。我的意思是：让内容跨页延伸很容易，所以我不确定你的确切问题是什么。也许如果您有一些显示您的特定问题的 html 代码或示例，我们可以为您提供更好的帮助？

标签： html css

【解决方案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% 的可用空间时并且至少为 1000 像素宽。这可以防止由宽内容生成的水平滚动条使标题看起来过早结束。

【讨论】：