如何摆脱底部的水平滚动条？

Question

请查看this。

我尝试调整溢出属性并更改图像的宽度，但滚动条仍保留在屏幕的底部。

有谁知道造成这种情况的原因以及如何阻止这种情况？

Answer 1

问题在于您的.slideshow定义（style.css：199 ...）。

浏览器尝试解决公式：

left
+ margin-left
+ border-left-width
+ padding-left
+ width
+ padding-right
+ border-right-width
+ margin-right
+ right
= parent width

并失败，因为left为50％且width为100％。使用margin:-800px对显示宽度为1920px的设备没有帮助，因为（1920 * 1.5 - 800）是2080，因此对于那么大的设备来说太宽了。

请改用以下定义，因为它会隐式创建一个width为100％的元素。

.slideshow{
    z-index: -9999;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}  

另见CSS Positioned Layout Module Level 3: Section 7.1。请记住，即使您使用上述技术，显示宽度小于1024px的用户也会有滚动条。对于此问题，请尝试body{overflow-x:hidden;}。

您的旧代码（不要使用它！仅用于完成）：

.slideshow{
    z-index: -9999;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100% !important;
    margin-left: -800px;
}  

Answer 2

这应该摆脱它，只是在devtools中尝试过。

body { overflow-x: hidden; }

Answer 3

overflow-x:hidden; 
overflow-y:auto;

应该这样做。

或安全起见，以涵盖可能不支持的浏览器：

overflow:auto; 
overflow-x:hidden; 

Answer 4

你可以像帕拉佐先生所说的那样做，但这会把所有内容都砍掉（你现在不得不滚动查看）你可能不想要的内容。请仔细查看包装器div等的宽度规格。您的div wraper的{​​{1}}设置为1003px。最好不要用这样的绝对值来设置维度，而是使用百分比。