HTML页面并没有完全达到底部

Question

我现在正在构建一个网站布局，除了页面底部有一些空间我无法摆脱之外，一切似乎都很有效。我尝试了很多东西，但似乎没有什么可以摆脱它。下面是一张图片，底部的蓝色是显示页面的主体。页脚应该完全覆盖它，但它  没有。

以下是我的一些HTML代码，供参考布局

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>

提前感谢您的帮助！

Answer 1

你必须设置绝对位置的底部属性

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

Answer 2

我遇到了同样的问题，花了我很多年才找到原因。

我在页脚底部有一个绝对定位的段落元素，底部边距溢出了其容器（页脚）。因为它的位置是绝对的，所以它从文档流中删除，而开发工具显示html既没有到达窗口底部，也没有到达正文，也没有到达页脚。看起来一切都只有这个小缝隙，这看起来完全是神秘的（令人生厌）。在删除p元素上的边距后，一切都很好。