移动布局上奇怪的身体填充

Question

如果你在移动版面上转到https://www.biznessapps.com，请检查谷歌浏览器中的元素并从overflow-x: hidden禁用body并再次调整大小，然后你会发现白色垂直条纹（填充）右边。

我必须将overflow-x:hidden添加到正文以隐藏此内容，但不确定是什么导致这种情况。除了使用overflow-x:hidden之外还有其他方法吗？

Answer 1

因此，您使用overflow-x解决方案所做的是一个可行的解决方案，但如果您想学习如何调试ghost元素，请阅读以下内容：

基本上，我调试了你的网站，看到你的一些部分（主要是2或3列，浮动）扩展到包装器的宽度。您也可以通过将其输入CSS

来查看

*{
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
}

向下滚动并查找超出主要div的部分，例如：

其中大部分是浮动部分的额外余量或填充的结果。

• 就像我说的那样，width:100%;和overflow-x:hidden;仍然是一个非常常见的解决方案，如果您想要修复结构，这就是如何调试它。

希望这有帮助！

Answer 2

它是一个滚动条。由于溢出的默认行为是添加滚动条，

overflow-x: visible;

可能是正确的方法。

Answer 3

滚动条有时可见，并且显示出来，例如多余的填充或隐藏正文x的边距将起作用。

html, body {
    width: 100vw;
    overflow-x: hidden;
}