css - 在显示比视口(viewport)宽的内容时，如何避免页眉和页脚被破坏？

Question

我已经把自己写进了一个 CSS Angular 落。看看这个页面:

http://staging.jungledragon.com/image/1082/sizes/large

打开此页面并确保浏览器窗口的宽度小于内容的总宽度，以便出现水平滚动条。如果现在向右滚动，您会注意到页眉和页脚都已损坏，原因是它们被设置为 100%。 100% 表示视口(viewport)的宽度，而不是浏览器窗口本身。

在我寻找解决方案的过程中，这个问题经常出现:

http://www.springload.co.nz/love-the-web/backgrounds-disappear-on-horizontal-scroll/

这对我来说不是解决方案，因为我事先不知道页脚和页眉需要多宽。此外，我不能简单地将其设置为非常高的最小宽度值，因为这会始终触发滚动条，即使不需要滚动条也是如此。

如何将页眉和页脚扩展到实际浏览器窗口的大小，同时仍然获得正确的水平滚动条行为。有可能吗？

Answer 1

抱歉，这不是一个确定的解决方案，但如果您使用一个不错的 CSS 调试器查看页面，您会发现 html 和正文的宽度不会拉伸(stretch)以容纳溢出的图像。

这就是页眉和页脚不拉伸(stretch)的原因。 width:100% 并不意味着“视口(viewport)的宽度”，它意味着“包含 block 的宽度”。

包含 block 是正文。而且 body 没有拉伸(stretch)。无论图像的宽度如何，它都保持不变。因此，#wrappertop 等人的宽度不是水平滚动视口(viewport)的 100%。它是 body 的 100%。

如果您真的对视口(viewport)水平滚动并拉伸(stretch)页眉和页脚感到死心塌地，我会首先尝试将 CSS 应用于正文(和/或 html，它的行为类似于包含 block ……有点)看看你能不能让他们拉伸(stretch)。那么您的页眉和页脚可能也会。

将图像居中或为其指定最大宽度是两个很好的解决方案——但如果这不是您想要的，那是您的特权。 :-)

如果有机会，我会尝试一下。但现在是午餐时间。不过，这是一个开始寻找的地方。