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

Question

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

Answer 1

由于您设置footer元素的样式，您会产生微妙的 CSS 效果。

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

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

在一条规则中，footer #copy您设置并在您设​​置left: 50%的子 div中。footer #copy pposition: relative, left: -50%

将事物向左移动 50%，然后再向右移动 50% 并不能完全抵消，因此，这些元素之一的宽度计算为导致溢出条件的值，因此滚动条。

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

我会从不使用太多绝对定位开始，在这种情况下并不真正需要。

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

Answer 2

这是原因：

footer { white-space: nowrap; }

Answer 3

在您的 CSS 中，您有

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

左：50%；是有罪的一方