网页的页脚没有延伸到页面的最底部

Question

我的问题是我有一个带页脚的网页。 如果没有足够的内容来填充整个页面，我希望页面将页脚扩展到浏览器窗口的底部。 当内容超过浏览器的高度并且有垂直滚动条时，我还希望页脚转到页面的最底部。

由于某种原因我无法让它工作，我按照这个页面上的教程： http : //matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

并且教程特别说明它做了我想要的 - “在包含大量内容的长页面上，页脚被从可见页面推到最底部。就像普通网站一样，当你一直向下滚动时它会出现。这意味着页脚并不总是占用宝贵的阅读空间。”

当我按照教程进行操作时，当没有足够的内容来填充页面时，它成功地将页脚放在页面底部，但是当内容过多时，页脚过早地放置在浏览器窗口最初结束的位置，因为正文和所有容器的高度都设置为窗口的高度，而不是整个页面的高度（滚动时的页面高度）。

div组织如下：

<div class="everything">
    <div class="main_content"></div>
    <div class="template_footer"></div>
</div>

我的 CSS 代码：

   html, body {
       margin:0;
       padding:0;
       height:100%;
   }
   .everything{ //main container
       width:100%;
       min-width:960px;
       max-width:1450px;
       margin-left:auto;
       margin-right:auto;
       min-height:100%;
       position:relative;
    }
    .main_content{  //body container
        width:100%;
        position:relative;
        float:left;
    }
    .template_footer{
        width:100%;
        height:44px;
        background-color:rgba(0, 0, 0, .5);
        position:absolute;
        bottom:0;
    }

我还尝试了许多不同的高度变化，但没有任何效果可以正常工作，我搜索了其他问题，但他们似乎没有专门回答这个问题。

Answer 1

页脚绝对位于.everything容器的底部。 因此，无论内容如何，​​页脚都将覆盖容器底部 44 像素。

Answer 2

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  min-height: 100%;
  position: relative;
}

.main {
  padding-bottom: 60px;
}

.footer {
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 60px;
}

主要部分 padding-bottom 应该大于页脚的高度。 页脚部分必须是绝对位置。 整个页面应该是 min-height 100%。