Search code examples
htmlcssjsfiddle

Why does JSFiddle show scrollbars when setting <html> and <body> to 100%

Why does JSFiddle (and also the other JS playgrounds I tried) do present Scrollbars when setting the width and height style of body and html element to 100%? A simple example on JSFiddle. This wouldn't happen on a "pure" site.

Is there a way to solve this without overflow hidden? I need this to present a specific problem where that matters. Do you know of any alternatives where this works correctly?

Solution

  • Most browsers add a margin to the document by default, which causes the overflow at 100%;

    Add this style:

    html, body {
  margin: 0;
}