0

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.

Clive Machado
  • 1,487
  • 1
  • 10
  • 15

1 Answers1

-1

Answer

Try setting your height to the height of Your screen and if you want it to be responsive just use some media elements. This should hide your scroll bar because if you have a website that goes under the height of your screen the scroll bar will appear. The same thing goes for the width so yeah, I hope this helps!

xgamerts
  • 37
  • 4