页脚固定在底部，延伸到页面之外

Question

试图使页脚粘在底部，并且内容会自动居中在页眉和页脚之间。

目前正在使用这种技术：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

但我的页脚出现在下方，并在两者之间造成了巨大的差距。

网站：Stingrayimages.ca

编辑：所以我设法让页脚粘在底部。但是，页脚不在页面底部，它留下了一点滚动。并且当缩小窗口时，页脚不会在内容所在的位置停止。

我也不能让内容 div 留在中间而不弄乱一切。

Answer 1

你的容器 div 应该包裹你的 Head div。我认为您将 Ryan 的头部区域误认为是设计师通常所说的页面头部，而实际上在示例中它是 html 的头部元素。底部的额外空间可能等于您的头部 div 的高度。

请记住，在粘性页脚中，容器会包裹除页脚之外的所有正文内容。

Answer 2

如果您使用与链接相同的技术，则缺少页脚位置。

仍然，通过您链接的示例，查看结构：

<style type="text/css">
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
</style>
<div class="wrapper">
  <div class="header"></div>
  <div class="push"></div>
</div>
<div class="footer"></div>

但我宁愿选择这样的东西：

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

div#container {
    position: relative;
    margin: 0 auto;
    height: auto !important;
    height: 100%; /* IE6: min-height*/
    min-height: 100%;
}

div#header {

}

div#content {
    padding: 1em 1em 5em;
}

div#footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}
</style>
<div id="container">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>