CODEWITHSUNDEEP
htmlcss
karansys
karansys

Reputation: 2719

How to hide horizontal scroll

<!DOCTYPE html>
<html>
    <body>
        <div style="background-color: aqua;height:1500px;width:260px;overflow: hidden;">
            some text
        </div>
    </body>
</html>

My screen resolution is 1920 X 1200 (width X height) , I have div whose height is 1500 px. Obviously this will overflow the screen and browser adds vertical scroll by default.

My requirement is make this vertical scroll disappear and anything that is overflown outside the window just clipped off. How to get this behavior with css styles?

I tried overflow:hidden on div it didn't work for me

<!DOCTYPE html>
<html>
    <body>
        <div style="background-color: aqua;height:1500px;width:260px;overflow: hidden;">
            some text
        </div>
    </body>
</html>

Upvotes: 0

Views: 48

Answers (2)

Trigstur
Trigstur

Reputation: 11

You can prevent a page/object from overflowing by adding the overflow property.

overflow | y/x axis
overflow-y | y axis
overflow-x | x axis

followed up by hidden as a value

hidden - The overflow is clipped, and the rest of the content will be invisible

body {
    overflow-y: hidden;
}

Upvotes: 1

Kevin
Kevin

Reputation: 1357

Hope the below snippet could help you.

body{height:1200px; width:100%; overflow:hidden}
<!DOCTYPE html>
<html>
    <body>
        <div style="background-color: aqua;height:1500px;width:260px;">
            some text
        </div>
    </body>
</html>

Upvotes: 3

Related Questions