3

I have the following CSS class loading across all of my site:

html, body {
  // no scrollbars before iframe resize
  overflow: hidden;
}

How do I override this, so that overflow is visible on a specific html page?

JZ.
  • 21,147
  • 32
  • 115
  • 192

3 Answers3

4

For the pages you don't want overflow hidden, give body a specific id, like #nothidden. Then, use CSS that checks for it

body {
    overflow: hidden;
}
body#nothidden {
    overflow: auto;
}

The id is more specific so it will override the first one (but only when it applies, of course).

P.S. I don't think you should need to put overflow:hidden on the html element. Does that even do anything? Have you tried it without "html" and only "body"?

Robert Martin
  • 16,759
  • 15
  • 61
  • 87
  • 1
    I would take this approach. Try not to add `!important` to your css unless absolutely necessary(easier said than practice albeit). Here since you have `body#nothidden` which is more specific than just `body` or `#hidden`, the `!important` is not needed, and you'll save yourself the headache of trying to find that one CSS rule that just doesn't want to be overridden. – k4t434sis Aug 25 '11 at 18:11
3
html, body {
    overflow: auto !important;
}

The "!important" will make it override just about any other declaration.

Christian
  • 552
  • 1
  • 5
  • 12
0

You should use !imporant for this:

html, body {
  // no scrollbars before iframe resize
  overflow: scroll !important;
}

Or you could give the body an id:

body#somePage{
  overflow:scroll;
}
Sgoettschkes
  • 13,141
  • 5
  • 60
  • 78
  • I also believe that inline css takes precedence over the file. So on that page he could use inline to change the overflow for the body. – Tony318 Aug 25 '11 at 17:56