This card existed before, but was outdated due to browser implementation changes. The information below is validated for the current list of browsers we support.
By default your html and body elements are only as high as the actual page content inside their container. If you only have two lines of text in your page, your html and body elements will only be around 40 pixels high, regardless of the size of your browser window.
You might be surprised by this, since setting a background on either html and body does cover the entire browser viewport. So what is happening? Well, since you cannot select the browser viewport with CSS, the browsers will take some properties like background-color and overflow-y from body and html and apply it to the unnamed viewport. I'm sorry for that.
To make things even more confusing, older browsers like IE9 actually do make html the full height of the browser viewport.
Anyway, this means that if you anchor an element absolutely to the bottom of the page, it will not actually sit on the bottom of the page if the content is narrower than the browser viewport's height:
.bottom-box {
background-color: red;
position: absolute;
left: 0;
bottom: 0; // this is the bottom end of the content, not the bottom end of the viewport
width: 200px;
height: 20px;
}
To make the page at least as high as the browser viewport (and then grow it if the content exceed's the viewport height), give your html as min-height of 100%:
html {
min-height: 100%;
}
This will align the .box above with the bottom of the viewport as expected, or with the bottom of the content if it is longer than the viewport is high.
Note that your body will still only be as high as your content. If you absolutely, positively need your body to be at least as high as the browser viewport, you can give it a min-height of 100vh. This means 100% of the viewport height:
body {
min-height: 100vh;
}
Note that any margin on body is added to the 100% because CSS.
Further reading
