横跨整个页面的拉伸元素，无论缩放/查看

我正在制作一个网页，该网页的头部一直延伸到整个网页，就像此网站和其他SE网站上的标题栏一样。在测试不同分辨率和浏览器尺寸的CSS时，我注意到如果浏览器小于页面尺寸，元素将只填充用户的浏览器。例如，如果浏览器窗口小于960像素宽（我网站主容器的宽度）并出现水平滚动条，则标题只会填满屏幕上当前的空间，并且不会伸展到其余部分可通过滚动条访问的页面。横跨整个页面的拉伸元素，无论缩放/查看

事实证明，我不是唯一一个患有这个问题的人：StackOverflow和其他SE网站有同样的问题。

enter image description here

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

来源

2012-02-25 Sonic42

在这可能是一种风格的选择。如果你有萤火虫，你可以在'＃header'样式中找到'width：960px'并将其禁用，使标题在整个页面上延伸。我的意思是：在页面上放置东西很容易，所以我不确定你确切的问题是什么。也许如果你有一些html代码或示例显示你的特定问题，我们可以帮助你更好一点？ – Jeroen 2012-02-25 00:42:11

诀窍是将元素设置为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。这可以防止宽内容生成的水平滚动条看起来像标题结尾太早。

来源

2012-02-25 00:50:01 Pat

横跨整个页面的拉伸元素，无论缩放/查看

回答

相关问题