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

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
– MaxiGui, Commented Jun 2, 2022 at 15:26

zmunk · Accepted Answer · 2023-01-27 12:52:39Z

1

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

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

edited Jan 27, 2023 at 12:52

zmunk

396 bronze badges

answered Jun 2, 2022 at 15:20

Jorge Guerreiro

86710 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cklimowski Over a year ago

Answer does not show the suggested changes to the code in the code block.

Jorge Guerreiro Over a year ago

It clearly states what the OP has to do, simple english interpretation, hence the to:

cklimowski · Accepted Answer · 2022-06-02 15:19:29Z

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 2, 2022 at 15:19

cklimowski

5667 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

Demo code:

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Demo code:

2 Answers 2

2 Comments

Comments

Linked

Related