页脚底部的固定页脚

问题描述：

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

This is my current code。

我试过使用其他教程，但没有工作。

我怎样才能做到这一点？

检查此页面右侧的“相关”链接。 – showdev 2013-02-08 22:35:11

您尝试过哪些教程，遇到了哪些问题？ – zakangelle 2013-02-08 22:37:25

所有的教程都告诉你将html和body设置为100％。这样做会把所有的内容都向上放到整个页面上。 – Feriscool 2013-02-08 22:38:21

答

我会推荐使用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 */ 
}

这个问题是将body和html设置为100％。它搞砸了我的整个页面。 – Feriscool 2013-02-08 22:37:01

为什么你的'body'和'html'的高度不同于100％？ – JSW189 2013-02-08 22:38:44

当我将它设置为100％时，它会向上推送所有内容。看看我放在原文中的代码。 – Feriscool 2013-02-08 22:39:22

答

尝试改变页脚元素，像这样的前述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文件中。

页脚底部的固定页脚

相关推荐