Why does a 100% width & height overflows and displays a scroll bar?

Asked Nov 30 '21 at 08:29

Active Jul 09 '22 at 20:32

Viewed 446 times

I have a very simple code below. I have added a 100% to the html, body tags and the root id.

html {
  color: #ffffff;
  background: #000000;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Another simple example</title>
  </head>
  <body>
    <div id="root">Why do I get horizontal and vertical scroll bars?</div>
  </body>
</html>

What I need to understand is why does it overflow in width and height both? This results in a scroll bar appearing, which I don't want to see. I would love a theoretical example reference to your solution if possible as well or a video where it is explained in detail why CSS does this.

asked Nov 30 '21 at 08:29

Clive Machado

1,685
1
11
16

1

Your body has a margin of 8px, set it to 0. – Sven Cazier Nov 30 '21 at 08:42
I think this makes more sense. Adding a margin 0 to the body tag, removes the scroll. – Clive Machado Nov 30 '21 at 10:39
Prefer using reset or normalize css. to normalize browser based default css. – hackwithharsha Sep 09 '22 at 05:39

Why does a 100% width & height overflows and displays a scroll bar?

0 Answers0