Menu
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:
A 3D perspective of the same page, showing the <body> tag is slid down from the top of the <html> tag:
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.
866
Setting min-height to 100% on both elements does not allow the body element to fill the page like you might expect. If you check the computed style values in dev tools, the body element has a height of zero. Meanwhile, the HTML element has a height equal to the visible part of the page in the browser.
It just means 100% of the div or class or tag it is enclosed within.
Try
header {
margin: 0px 17% 0px 17%;
}
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
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
