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

时间:2012-02-13 20:41:43

标签: html css

请查看this

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

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

4 个答案:

答案 0 :(得分:3)

问题在于您的.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;
}  

答案 1 :(得分:1)

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

body { overflow-x: hidden; }

答案 2 :(得分:1)

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

应该这样做。

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

overflow:auto; 
overflow-x:hidden; 

答案 3 :(得分:0)

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