CODEWITHSUNDEEP
htmlcssbrowserscrollbar
Freesnöw
Freesnöw

Reputation: 32133

Remove scrollbars from a browser

I have a website will have a background that is the full size of the screen. Because of cross-browser limitations, some of them like to keep a scroll bar even if the image is about the exact size of the screen. Is it possible for me to just remove the scroll bars?

In case you couldn't tell, I'm working with HTML, CSS, and JavaScript :)

Upvotes: 1

Views: 15297

Answers (4)

user734709
user734709

Reputation:

Try adding html {overflow:auto;} to your CSS declarations. Auto overflow only gives the element the scroll bars it needs, even none at all. In the case of the disabled vertical scroll bar in IE, using auto overflow will remove it if it isn't needed.

This works a little better than using hidden overflow because you're declaring it on html or body. If your browser window becomes smaller than, not only your image but, your content you won't have any scroll bars with hidden overflow. As @Marc B said in a comment, removing user interface components to enforce a design is generally considered bad design.

You can read more about the overflow property here. From the site:

IE Trick

IE displays a vertical scrollbar all the time whether it needs it or not. This can be nice > for preventing horizontal jumps, but isn't always desirable. To remove this in IE, you can > set overflow to auto on the body element.

Upvotes: 0

Aaron Brewer
Aaron Brewer

Reputation: 3667

Make sure your image is applied via the body tag, and if that does not work make sure it is applied to the html tag both of these tags via the Cascading Style Sheet file for example.

body {
background: url("image-src");
overflow: hidden;
}`

html {
background: url("image-src");
overflow: hidden;
}

Also remember to try and have the background image be of reasonable height and width.

Hope this helps.

Upvotes: 1

ascanio
ascanio

Reputation: 1526

Try property:

overflow:hidden;

See also:

http://www.w3schools.com/Css/pr_pos_overflow.asp

Upvotes: 3

mkly
mkly

Reputation: 2263

body {
  overflow: hidden;
}

and for ie 7 

html {
  overflow: hidden;
}

Upvotes: 10

Related Questions