Question

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

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

如何复制直播

抓住浏览器的右侧并向内拉。最终会出现一个滚动条。不一定很糟糕。正如我在这里固定的那样。但是...请注意，滚动条是我头部顶部背景颜色的长度，实际上是在创建一个“Curtain”效果。

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

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

在任何一种情况下，我都知道有些事情是对的。帮助赞赏！

Answer 1

在CSS中添加以下内容：

body { min-width: 980px; }

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

但这并不会使width: 100%更大。它 - 及其背景 - 仍处于视口大小。这就是滚动时获得“幕布”效果的原因。

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

Answer 2

要解决此问题，请添加

html, body {
    min-width: 980px
}

在您的www.alpacanation.com/styles.css:40，然后您就完成了。：）

解释：问题是这个容器，

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

该容器的宽度为：980px，它会使视图向上移动，因为它会强制容器保持在980px宽，而其余容器正在收缩，从而产生类似“幕布”的效果。