为什么我的页面在小屏幕上显示水平滚动条？

Question

我有响应式HTML page，当宽度小于691px时显示滚动条，如何隐藏滚动条？是什么让滚动条出现？

Answer 1

在你的CSS中

@media screen and (max-width: 800px)
    footer nav {
        left: 50%;
        top: 0;
    }  
}  

左：50％;是有罪的一方

Answer 2

这是原因：

  

footer { white-space: nowrap; }

Answer 3

由于您设置footer元素的样式，因此您有一种微妙的CSS效果。

在您的页脚（绝对定位）中，您有两个子元素nav和#copy，它们都使用绝对定位。

在不详细说明如何计算绝对定位元素的宽度的情况下，由于您对版权声明的定位，滚动条应该是主要的。

在一条规则中，footer #copy设置left: 50%，并在子格footer #copy p中设置position: relative, left: -50%。

将东西向左移动50％然后向右移动50％并没有完全抵消，因此，这些元素中的一个具有计算导致溢出条件的值的宽度，因此滚动条。

没有真正好的方法来解决这个问题，因为CSS对于你想要做的事情来说过于复杂。

我首先不要使用如此多的绝对定位，在这种情况下并不需要。

您可以通过删除white-space: nowrap（样式表中的第174和215行）来隐藏滚动条，但这会使您的布局更加突破。