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

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

有谁知道是什么原因导致这种情况以及如何阻止这种情况？

2012-02-13 imjp

问题在于你的.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％的元素。请参阅CSS Positioned Layout Module Level 3: Section 7.1。请记住，即使使用上述技术，显示宽度小于1024像素的用户也将拥有滚动条。对于这个问题尝试body{overflow-x:hidden;}。

你的旧代码（不要只使用它完成！）：

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

来源

2012-02-13 20:53:26 Zeta

**终于有人得到根本原因** +1 ..。也许还会在第199行显示CSS规则。这是一个混乱......剩下：50％; margin-left：-800px;如果发现自己使用巨大的负边限来补偿别的东西，也许最初的方法需要从头开始重新检查。 – Sparky 2012-02-13 21:00:09

@ Sparky672：包含旧代码并添加了一点解释。我真的不知道为什么这么多人试图使用过于简单的黑客（对你们没有冒犯性），当问题显然存在于可能是宝贵的css代码的脆弱线条之间时... – Zeta 2012-02-13 21:09:51

我认为它总是最好的为了知道_你为什么必须做一些事情，而不是重新设置所有CSS规则和隐藏溢出的一揽子方法。认真思考一下......每当你应用自己的规则时，你基本上都会“重置”默认的CSS。当三行后面应用'margin：0;'将'p'应用于'p'时，你只会将自己的边距应用于'p'，这是荒谬的。 – Sparky 2012-02-13 21:15:38

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

body { overflow-x: hidden; }

来源

2012-02-13 20:43:32 elclanrs

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

应该这样做。

，或者是在安全方面，在包括可能不支持该浏览器：

overflow:auto; 
overflow-x:hidden;

来源

2012-02-13 20:43:53

是的，这基本上解决它=） – imjp 2012-02-14 12:39:16

你可以做Pallazzo先生说，但这将砍掉所有内容到右侧（即你现在必须滚动才能看到）你可能不想要的。请好好看看包装div的宽度规格等。你的div叫wraper有width设为1003px。最好不要以绝对的方式设置尺寸，而应使用百分比。

来源

2012-02-13 20:48:38

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

回答

相关问题