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

user_10691766 0
Viewed 49

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

css html
2 Answers

Try adding margin: 0px; to your CSS:

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

Seems to be working here:

https://jsfiddle.net/k2boqeLt/

user_99740250

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

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