CODEWITHSUNDEEP
htmlcssweb
ChristopherW
ChristopherW

Reputation: 1063

HTML page doesn't reach the bottom completely

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.

enter image description here

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!

Upvotes: 0

Views: 3224

Answers (2)

wkille
wkille

Reputation: 643

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.

Upvotes: 1

Samuel
Samuel

Reputation: 43

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;
}

Upvotes: 2

Related Questions