Element not taking up all the space when width and height is set to 100%

Question

The red #container element doesn't seem to take up all the available space in the document, even when it's width is set to 100%. There seems to be some extra padding in the html element, but even when I set it's padding to 0 it's still there.

How could I fix this? Thanks in advance.

Demo code:

body, html {
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
  background-color: red;
}

<body>
  <div id='container'></div>
</body>

JsFiddle here

you only have this margin in most of the "snippet", "fiddle" to the body, on a normal html page, you wont have that. So just add `margin:0;` to your `body` — MaxiGui, Jun 02 '22 at 15:26

score 1 · Answer 1 · edited Jan 27 '23 at 12:52

1

You have to add padding: 0 and margin: 0 to:

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

edited Jan 27 '23 at 12:52

zmunk

29
6

answered Jun 02 '22 at 15:20

Jorge Guerreiro

682
6
22

1

Answer does not show the suggested changes to the code in the code block. – cklimowski Jun 02 '22 at 15:21
It clearly states what the OP has to do, simple english interpretation, hence the `to:` – Jorge Guerreiro Jun 02 '22 at 15:21

score 0 · Answer 2 · answered Jun 02 '22 at 15:19

0

Try adding margin: 0px; to your CSS:

body,
html {
  width: 100%;
  height: 100%;
  margin: 0px;
}

Seems to be working here:

https://jsfiddle.net/k2boqeLt/

answered Jun 02 '22 at 15:19

cklimowski

589
6
21

Element not taking up all the space when width and height is set to 100%

Demo code:

2 Answers2