<html> and <body> Tags 100% Height Fail

StackOverflow https://stackoverflow.com/questions/12020677

Question

I have an application which requires me to use CSS to set the height of the <html> and <body> tags to 100%, like this (JSFiddle version):

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

body {
  background-color: #141414;
  overflow-x: hidden;
  overflow-y: auto;
}

I've included all of the CSS that styles these tags. However, I always have a scrollbar which allows me to scroll down about 20px, regardless of how large or small the content of the page really is. This is problem also persists on screes of any size.

I can see why in these screenshots. Note that the body has an ID of #container, but this is simply used for JS targeting, not CSS styling:

enter image description here

A 3D perspective of the same page, showing the <body> tag is slid down from the top of the <html> tag:

enter image description here

Since I don't have any margin or padding on any of these tags, and since none of the HTML elements near the top of the page have any margin or padding to push the <body> tag downward, I'm really stuck.

How can I fix the CSS such that the <body> tag is flush with the top of the page?

Thank you for your time.

Was it helpful?

Solution

Try 

header {
    margin: 0px 17% 0px 17%;
}

OTHER TIPS

The most likely cause is collapsing margins. You can "fix" this by adding padding: 0.01px to your body.

Hopefully my second attempt at answering this question isn't as stupid as my first XD

Seems like you have a new line or a space between <html> and <body>...

Try this:

<html><body>
    ...
</body></html>

instead of:

<html>
<body>
    ...
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top