Home/ Questions/Q 8442755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T08:55:36+00:00

I have an application which requires me to use CSS to set the height

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try 

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