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

Question

不确定如何最好地提出我的问题。而且我还不能发布截图。 :( 这个问题确实发生在当前的编码实践中。你现在甚至可以在 Facebook 的主页上看到这个问题。

这是我的网址:www.alpacanation.com

如何复制直播

捕获浏览器的右侧并向内拉。最终会出现一个滚动条。不一定不好。正如我在这里固定的那样。但是……请注意，滚动条是标题顶部背景色的长度，这实际上是在创建类似“窗帘”的效果。

更糟的是:如果在其他高级父元素(如 .Footer 或 .Page)上玩溢出和相对位置，窗帘将开始覆盖整个网站的顶部。

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

无论哪种情况，我都知道有些地方不对。帮助表示赞赏!

Answer 1

在你的 CSS 中添加这样的东西:

body { min-width: 980px; }

您在页面的许多元素中设置了 min-width: 980px;，但在 html、body 或.容器。一旦视口(viewport)小于此值，这些元素将溢出 html 并为您提供您所看到的滚动条。

但这不会使 html 变大。它——及其背景——仍然是视口(viewport)大小。这就是为什么您在滚动时会获得“窗帘”效果。

在 html 上设置 width: 100% 并不能解决这个问题；这只会将 html 设置为浏览器窗口的 100% 宽度。如果您打算使用 min-width，请确保您不仅将其应用于包含您的内容的元素，而且还应用于包含您的背景的元素。