html - 在整个页面上拉伸(stretch)元素，无论缩放/ View 如何

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