頁腳底部的固定頁腳

我想在頁面底部有一個固定頁腳，我可以在其中有一行文本（全部以文本爲中心），just like this。頁腳底部的固定頁腳

This is my current code。

我試過使用其他教程，但沒有工作。

我怎樣才能做到這一點？

來源

2013-02-08 Feriscool

檢查此頁面右側的「相關」鏈接。 – 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 */ 
}

來源

2013-02-08 22:34:15 JSW189

這個問題是將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文件中。

來源

2013-02-09 11:44:42 matsolof

頁腳底部的固定頁腳

回答

相關問題