CSS垂直背景覆盖和水平滚动条出现答案

【问题标题】：CSS Vertical Background overlay and a Horizontal Scrollbar appearsCSS垂直背景覆盖和水平滚动条出现
【发布时间】：2014-06-19 15:52:03
【问题描述】：

不知道如何最好地问我的问题。而且我还不能发布截图。 :( 在当前的编码实践中确实会发生此问题。您目前甚至可以在 Facebook 主页上看到此问题。

这是我的网址： www.alpacation.com

如何实时复制

抓住浏览器的右侧并向内拉。最终会出现一个滚动条。不一定是坏事。因为我在这里有一个固定的。但是……请注意，滚动条是标题顶部背景颜色的长度，实际上是在创建类似“窗帘”的效果。

让事情变得更糟：如果在 .Footer 或 .Page 等其他高级父元素上使用溢出和相对位置，则窗帘将开始覆盖在整个网站的顶部。

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

无论哪种情况，我都知道有些地方不对劲。感谢您的帮助！

【问题讨论】：

这不会在 Chrome 中重现，所以截图对我们双方都有好处。 :)
更好的提问方式：（1）找出问题所在的像素，（2）尝试确定复制问题所需的最少代码量并将其添加到您的问题中，（ 3) jsFiddle.net 或 Codepen.io 是创建问题演示的绝佳资源，而不是将我们发送到您的整个站点。
专业提示：Firefox 有一个responsive design view，您可以在其中快速测试各种屏幕尺寸。

【解决方案1】：

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

body { min-width: 980px; }

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

但这不会让html 变得更大。它——以及它的背景——仍然是视口大小。这就是滚动时会出现“幕布”效果的原因。

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

【讨论】：

【解决方案2】：

要解决这个问题，请添加

html, body {
    min-width: 980px
}

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

解释：问题出在这个容器上，

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

该容器的宽度为：980px，这会破坏视图，因为它会迫使该容器保持在 980px 宽，而其余部分正在缩小，从而产生类似“窗帘”的效果。

【讨论】：