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

Question

Please take a look at this .

I've tried adjusting the overflow properties and changing the widths of the images but the scroll bar remains at the bottom of the screen.

Does anyone know what is causing this and how to stop this?

Answer 1

The problem is in your .slideshow definition (style.css:199...).

The browser tries to solve the formula:

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

and fails because left is 50% and width is 100%. Your use of margin:-800px won't help on a device with display width of 1920px, as (1920*1.5 - 800) is 2080 and thus too wide for a device of that size.

Use the following definition instead, as it will implicit create a element with an width of 100%.

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

See also CSS Positioned Layout Module Level 3: Section 7.1 . Keep in mind, that even when you use the technique described above users with a display width of less than 1024px will have a scrollbar. For this issue try body{overflow-x:hidden;} .

Your old code (don't use it! only for completion):

.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;

should do it.

or to be on the safe side, to cover browsers that might not support that:

overflow:auto; 
overflow-x:hidden; 

Answer 4

You can do as Mr. Pallazzo said, but this will chop off all content to the right side (that you're now having to scroll to see) which you probably don't want. Please take a good look instead at the width specifications of the wrapper divs etc. Your div called wraper has a width set as 1003px. It is best not to set dimensions in such absolute terms, and instead use percentages.