Question

我想在页面底部有一个固定的页脚，我可以在其中创建一行文本（所有文本居中），just like this。

我尝试过使用其他教程，但无已经有效。

我该怎么做？

Answer 1

我建议使用Ryan Fait's sticky footer。它可以完成你想用纯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文件中。

固定页脚底部的页脚

2 个答案: