页脚粘在底部，超出页面范围

问题描述

尝试使页脚固定在底部，内容自动在页眉和页脚之间居中。 当前正在使用此技术：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ 但是我的页脚出现在下方，并在两者之间造成了巨大的差距。 网站：Stingrayimages.ca 编辑：所以我设法使页脚坚持到底部。但是，页脚不在页面底部，只留下一点滚动。当缩小窗口时，页脚不会停在内容所在的位置。 我也不能让内容div停留在中间而不弄乱所有内容。     

解决方法

您的容器div应该包装您的Head div。我认为您误认为Ryan的头部区域是设计师通常称为页面标题的区域，而实际上在示例中，它是html的head元素。底部的额外空间可能等于您的div高度。 请记住，在粘性页脚中，容器包装了所有内容，但页脚除外。     ,如果您使用与链接相同的技术，那么您将在页脚缺少位置。 仍然，通过链接的示例，您可以看到结构：

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