html - 在页面底部固定页脚

Question

我想在页面底部有一个固定的页脚，在那里我可以有一行文本（所有文本居中），就像这样。

这是我当前的代码。

我试过使用其他教程，但没有一个奏效。

我怎样才能做到这一点？

Answer 1

我建议使用Ryan Fait 的粘性页脚。它可以完成你试图用纯 CSS 做的事情。

HTML：

<div class="wrapper">
    Content Here
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS：

* {
    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 */
}

.footer { /* centers the text */
    text-align: center; /* horizontal centering */
    line-height: 142px; /* vertical centering; should be equal to the footer height */
}

Answer 2

尝试像这样更改页脚元素和前面的 hr 元素：

<footer style="position:fixed; left:0px; right:0px; bottom:0px;
      background:rgb(255,255,255); text-align:center;">
  <hr>
  <p>&copy; Company 2012</p>
</footer>

我认为这或多或少地解决了你的问题。它与http://ryanfait.com/sticky-footer/的页脚不完全一样，但据我了解您的问题，这就是您想要的。

PS：CSS当然应该放在CSS文件中。