Question

可能重复：
CSS sticky footer

我现在有这个问题很长一段时间了，问题出在我的所有页脚上。每次我放入这段代码语法：

  <Footer>
    <p class="About">DESIGN BY MICHAEL & CODE BY ROKO</p>
  </Footer>

Footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 141px;
background: url(../assets/content/footer.png) repeat-x left bottom;
}

页脚要么放在底部，要么在滚动时，它会保持原位，并且页脚几乎位于页面的一半处，或者应该位于“页脚”内部的文本位于页面顶部页。

有人可以帮帮我吗？我试图查找Sticky Footer，结果仍然相同......

Answer 1

我做这样的事情并且效果很好：

<div class="footer" id="footer">My Footer</div>

#footer
{
    clear: both;
    border: 1px groove #aaaaaa;
    background: blue;
    color: White;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

您可以在此处查看示例：http://jsfiddle.net/RDuWn/

Answer 2

我前一段时间发现了这个：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page并使用了类似的方法

Answer 3

查看以下链接 -

How do you get the footer to stay at the bottom of a Web page?

* {
    margin: 0;
}
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 */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

将页脚放在屏幕底部

3 个答案: