CSS垂直背景叠加和水平滚动条出现

Question

不知道如何最好地问我的问题。我还不能发布截图。这个问题确实发生在当前的编码实践中。你现在甚至可以在facebook主页上看到这个问题。

这是我的URL:www.alpacanation.com

如何实时复制

抓住浏览器的右侧并向内拉。最后出现一个滚动条。不一定是坏事。就像我在这里固定的一样。但是，请注意，滚动条是背景颜色的长度，在我的头部顶部，这实际上是创建一个"窗帘"的效果。

更糟的是:如果在其他高层父元素上，如。footer或。page，你设置了溢出和相对位置，那么窗帘将开始覆盖整个站点的顶部。

看看Facebook:他们也经常有这个问题。显然，大多数人都没有注意到它，因为它没有超出内容的顶部。

无论哪种情况，我都知道有什么不对劲。感谢帮助!

Answer 1

在你的CSS中添加如下内容:

body { min-width: 980px; }

您在页面上的许多元素中设置了min-width: 980px;，但没有设置html, body或.container。一旦视口小于此值，这些元素将溢出html，并给出您所看到的滚动条。

但这并没有使html变大。它和它的背景仍然处于视口大小。这就是为什么当你滚动时你会得到"窗帘"效果。

设置width: 100%在html不能解决这个问题;这只会将html设置为浏览器窗口的100%宽度。如果你要使用min-width，确保你不只是把它应用到包含你的内容的元素上，还包括那些有你的背景的元素。

Answer 2

要解决这个问题，添加

html, body {
    min-width: 980px
}

在www.alpacanation.com/styles.css:40中，那么就完成了。:)

说明:问题出在这个容器，

<!— stat container —>
<div class=“container”>
    <!— START FOOTER MENU SECTION —>

该容器的宽度为:980px，这打乱了视图，因为它迫使该容器保持在980px宽，而其他容器则在缩小，从而产生了"窗帘"般的效果。