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

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宽时.这可以防止由宽内容生成的水平滚动条使其看起来像标题过早结束.