在屏幕底部放置页脚[重复]答案

【问题标题】：Placing Footer at Bottom of Screen [duplicate]在屏幕底部放置页脚[重复]
【发布时间】：2011-11-24 10:54:51
【问题描述】：

可能重复：
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，结果还是一样...

【问题讨论】：

“粘性页脚”就是答案。如果它不起作用，则说明您没有正确实施。
你只发布了一半的故事......那个 CSS 的 HTML 在哪里？
这是页脚。而且我发现了为什么当一切都到位并且它是一个不同的对象时会有一个垂直滚动，与水平相同。现在页脚仍然留在原处....

标签： html css footer sticky-footer

【解决方案1】：

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

【讨论】：

【解决方案2】：

查看以下链接 -

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

我做了这样的事情，效果很好：

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

【讨论】：

我更喜欢这个解决方案，它又好又干净
我发现一个问题（我使用的是 Chrome 或 IE）：Lorem ipsum 的最后一句话被页脚隐藏了。