1

I'm trying to make an HTML5 canvas element fullscreen with the window.innerHeight and innerWidth properties.

Unfortunately, on Chrome 10, when I set use the following doctype:

<!DOCTYPE HTML>

...there is some extra scrolling space indicated by scroll bars which shouldn't appear.

Without a doctype, everything is fine.

The element is an HTML5 canvas, so styling with 100% will only stretch the content.

Is it worth using a doctype which breaks my functionality (without which might be bad?), or should I subtract, say, 15px from the values in order to keep scroll bars from appearing? (which is kludgy)

Hunter Beast
  • 782
  • 7
  • 17

1 Answers1

3

It is surely because of the default padding found on the body element of the page. Remove all default padding and margins using:

* {
    padding: 0;
    margin: 0;
}
Marcus Whybrow
  • 19,578
  • 9
  • 70
  • 90
  • Just for `body` would be enough. – Thai Jan 02 '11 at 08:00
  • Yes but an old fashioned global padding/margin reset is usually a good idea with these things. – Marcus Whybrow Jan 02 '11 at 08:46
  • Thanks guys. I had those styles in there earlier, but it must not've been included with the document or something. I went ahead anyway and wrote a bunch of JavaScript, and now everything works fine for some reason. Thanks again! – Hunter Beast Jan 05 '11 at 11:32