Question

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

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

但是我的页脚出现在下面并且在两者之间产生了巨大的差距。

网站：Stingrayimages.ca

编辑：所以我设法让页脚坚持到底部。但是，页脚不在页面底部，只留下一点滚动。当收缩窗口时，页脚不会停在内容的位置。

此外，我无法让内容div保持在中间而不会弄乱一切。

Answer 1

你的容器div应该包裹你的头部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>

页脚粘贴到底部，延伸到页面以外

2 个答案: