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 0 · Answer 1 · 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

574
5
20

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

0

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

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

answered Jun 02 '22 at 15:20

Jorge Guerreiro

451
4
17

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

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

Demo code:

2 Answers2