All geek questions in one place

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

I have an application that 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 have included all the CSS that styles these tags. However, I always have a scrollbar that allows me to scroll down about 20 pixels, regardless of how big or small the page content actually is. This problem also persists on scree of any size.

I see why in these screenshots. Note that the body has the identifier #container , but this is just used for JS targeting, not CSS styles:

enter image description here

The three-dimensional perspective of the same page, showing the <body> , has shifted down from the top of the <html> :

enter image description here

Since I don’t have any margins or padding for any of these tags, and since none of the HTML elements at the top of the page have any margins or indents to flow <body> down, I really get stuck.

How can I fix CSS so that the <body> tag is at the same level as the top of the page?

Thank you for your time.

+6
source share
3 answers

Try

 header { margin: 0px 17% 0px 17%; }
+3
source

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

I hope my second attempt to answer this question is not as stupid as my first XD

+1
source

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

Try the following:

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

instead:

 <html> <body> ... </body> </html>
-4
source

Source: https://habr.com/ru/post/923195/

More articles:


All Articles