CSS全宽度水平滚动

Question

我刚刚完成了这个网站，但在加载时似乎出现了超出滚动的问题。

您是否能给我反馈，告诉我为什么会出现这个问题以及如何解决它呢？

我可以在这里发布代码，但最好提供一个实际工作的示例，因为在过去几天中我遇到的大多数问题都是如此。

- Jess McKenzie

---

这是你的.footer nav。 - bfavaretto

是的。你没有减少NAV元素的宽度，而是设置了负的右边距。扇自己一个耳光 :) - Šime Vidas

关于在您的问题中发布代码：确实强烈建议这样做。如果可能，添加一个可工作的示例也非常有帮助。发帖的代码和工作示例都不应该是您完整的代码，而是重现问题的最短示例（请参见http://sscce.org/）。很多时候，准备这个示例的过程将带您找到问题的根本原因。 - bfavaretto

@ŠimeVidas 我现在在想什么鬼，把它作为一个答案添加进去。 - Jess McKenzie

@bfavaretto 你会提供答案吗，还是我来做？ - Šime Vidas

@ŠimeVidas，加油！你有我的祝福:) - bfavaretto

Answer 1

所以，页脚中的NAV元素具有负右边距，导致水平溢出，进而导致滚动条出现。我猜你的意图是将nav项向右移动。为了摆脱滚动条，只需删除负边距，并将NAV的宽度设置为适当的值即可。

- Šime Vidas

Answer 2

尝试将以下行添加到您的包装器中：

overflow-x: hidden;

- Jan Wrm

Answer 3

尝试在您的<div id="wrapper">元素上添加此CSS属性：

overflow-x: hidden;

请查看链接，获取关于overflow-x属性的官方文档。

您的CSS应该类似于以下内容：

#wrapper {
     width: 100%;
     height: 100%;
     min-height: 100%;
     position: absolute;
     overflow-x: hidden;
}

我已经在Mac Os上的Safari（版本5.1.7），Firefox（11.x）和Google Chrome（19.x）中尝试过了，它非常好用。

希望能对你有所帮助！

- Cacho Santa