沒有內容Div的Wordpress頁面上的CSS粘頁腳

我正在試着讓我的頁腳下到頁面的末尾，以便粘到底部。沒有內容Div的Wordpress頁面上的CSS粘頁腳

我嘗試使用教程，我使用了CSS樣式，使頁腳粘底：

* { margin:0; padding:0; } 

html, body, #wrap { height: 100%; } 

body > #wrap {height: auto; min-height: 100%;} 

#main { padding-bottom: 175px; } /* must be same height as the footer */ 

#footer { 
     position: relative; 
    margin-top: -175px; /* negative value of footer height */ 
    height: 175px; 
    clear:both;} 

/* CLEAR FIX*/ 
.clearfix:after {content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;} 
.clearfix {display: inline-block;} 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */

我試圖使這項工作現在幾個小時，可能有人請檢查我的問題？

My project I'm working on

在此先感謝

來源

2012-02-06 Evils

爲了實現你必須做出一些修改你的HTML和CSS粘的頁腳效果，請嘗試以下操作：

CSS

html, body { 
    height: 100%; 
} 

#colophon:before, #colophon:after { 
    content: ""; 
    display: table; 
    zoom:1; /*ie fix*/ 
} 
#colophon:after { 
    clear: both; 
} 
footer { 
    display: block; 
} 

#page { 
    height: auto !important; 
    margin: 2em auto -175px; 
    max-width: 1000px; 
    min-height: 100%; 
}

HTML

在爲了讓您的頁腳堅持到底部，您必須將其與#page容器分開，如下所示：

<div id="page" class="hfeed">..</div> 
<footer id="colophon" role="contentinfo">...</footer>

而且應該做的伎倆！

來源

2012-02-06 19:19:35

謝謝sooo！你救了我的一天;）那就是我正在尋找的！ – Evils 2012-02-06 20:49:20

其比你正在做的事情更加簡單。嘗試這種結構

<html> 
<body> 
<div id="centering-div"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div> 
</body> 
</html>

這樣，頁腳內容將始終位於底部。您可以將css樣式添加到居中div id以給出站點寬度和居中css。您不需要在跨越整個寬度的頁面部分上指定定位。內容div是您應該放置所有內容的位置。

來源

2012-02-06 18:37:10 PAULDAWG

這不是最簡單的方法，因爲我寫了我使用Wordpress，因此它真的很難改變我的主題和WordPress的工作方式。 – Evils 2012-02-06 18:38:46

我只是看着你的頁面的源代碼和它的結構。唯一的區別是不使用div的使用頁腳元素。所以，在你的CSS中，沒有頁腳的ID，所以CSS應該是頁腳{}。嘗試取出所有的定位CSS，因爲元素已經在您的網站的正確位置。你只需要應用清除：在使用某種浮動定位的其他元素之後立即修復元素，使它們在下一個層次上更好。 – PAULDAWG 2012-02-06 18:47:43

沒有內容Div的Wordpress頁面上的CSS粘頁腳

回答

相關問題