I tried all the solutions above and I'm not discrediting any of them, but in my case, they didn't work.
For me, the problem was caused because the <header>
tag had a margin-top
of 5em and the <footer>
had a margin-bottom of 5em. I removed them and instead put some padding
(top and bottom, respectively). I'm not sure if replacing the margin was an ideal fix to the problem, but the point is that, if the first and last elements in your <body>
has some margins, you might want to look into it and remove them.
My html
and body
tags had the following styles
body {
line-height: 1;
min-height: 100%;
position: relative; }
html {
min-height: 100%;
background-color: #3c3c3c; }