HTML page doesn't reach the bottom completely

Question

I'm building a website layout right now and everything seems to be working great except that there is a bit of space at the bottom of the page I can't get rid of. I have tried many things, but nothing seems to get rid of it. Here is an image below where the blue on the bottom is the body of the page showing. The footer is supposed to completely cover it, but it doesn't.

Here is some of my html code for reference of the layout

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #292888; } footer { width: 100%; height: 75px; display: block; position: absolute; z-index: 1000; background-color: #29292c; } 

 <div id="site-navigation-header"> <div id="site-navigation-header-content"> <div id="navigation-logo"></div> <div id="navigation-menu"></div> </div> </div> <div id="site-landing-photo-container"> </div> <!-- Main content for page --> <div class="main-content-view"> <div id="main-centered-content"> </div> </div> <!-- Site wide footer TODO: Load in dynamically to each page --> <footer> <div id="site-footer-content"> <div id="site-license-container"> Somasasa, 2015 </div> <div id="social-media-container"> <a href="https://www.facebook.com" target="_blank"> <div id="facebook- icon" class="social-media-icon-div"></div> </a> <a href="https://www.twitter.com" target="_blank"> <div id="twitter-icon" class="social- media-icon-div"></div> </a> </div> </div> </footer> 

Thanks in advance for your help!

Answer 1

you have to set the bottom property for the absolute position

footer{
    width: 100%;
    height: 75px;
    display: block;
    position: absolute; bottom:0;
    z-index: 1000;
    background-color: #29292c;
}

Answer 2

I had the same issue and it took me ages to find the cause.

I had an absolute-positioned paragraph element in the bottom of the footer with a bottom margin that was overflowing its container (the footer). Because it had position:absolute it was taken out of the flow of the document and the dev tools showed that the html didn't reach the bottom of window, nor did the body, nor did the footer. It just looked completely mysterious (and exasperating) with this little gap below everything. After I removed the margin on the p element all was well.