頁腳絕對定位不工作

我不知道如何解決這個問題。將事情放在位置上：相對將會使底部爲零：0px，並且由於缺少內容，還會在不適合整個高度的頁面上創建大量空白區域。頁腳絕對定位不工作

把它放在絕對的地方使得它覆蓋了內容足夠長的頁面來生成一個滾動條。

.footer { 
    width: 100%; 
    height: 150px; 
    background: #3167b1; 
    position: absolute; 
    bottom: 0px; 
}

這應該是正確的？由於某種原因，它只是沒有。它是Wordpress嗎？以前從未遇到過這個問題，而且我已經完成並清理了很多可能導致問題的問題。

編輯：傻我...我忘了這裏的HTML。現在它無關，在它，所以它僅僅是：

<div class="footer"></div>

我必須這樣說，這只是爲了測試它。要看看發生了什麼，你可以訪問它在這裏： http://www.yenrac.net/theme

我希望有助於澄清一些事情。

我也從頭開始創建了這個主題。

來源

2015-10-22 user3634781

請同時發佈您的html。否則，我猜你需要指定容器底部的容器底部等於或大於頁腳高度。 – sdvnksv

它實際上正在工作。問題是，當div是絕對的時候，它們出現在正常人體內容的頂部。 – Lee

如果我收到了你的問題的權利，這應該工作：

http://jsfiddle.net/9qq1dtuf/

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin-bottom: 170px; 
} 
.footer { 
    width: 100%; 
    height: 150px; 
    background: #3167b1; 
    position: absolute; 
    bottom: 0px; left: 0; 
}

來源

2015-10-22 10:58:23 sdvnksv

這種工作。它把它帶到頁面的底部，但它仍然覆蓋內容，似乎不喜歡頁邊距或底部。編輯：沒關係，即使我之前嘗試過，這個工作完美。猜想熬夜可以導致這些事情> _> 謝謝！ – user3634781

請嘗試波紋管CSS

.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    height: 150px; 
 
    background: #3167b1; 
 
    width: 100%; 
 
    left: 0; 
 
}

<div class='footer'> 
 
</div>

來源

2015-10-22 11:13:04 Mitul

嗯，我懷疑它的WordPress的...除非你正在使用預製主題（或沿着這些行）。在看不到HTML的情況下很難看到你做了什麼。但無論如何，繼承人我認爲可能是問題：

您已選擇具有「footer」類的頁腳元素。我打算繼續前進，並做出有根據的猜測，即你打算選擇名稱爲footer的元素（不是它的類）。因此，也許它只是一個小一點微小的片斷修復（即除去在你的CSS頁腳之前「」）：

footer { 
    width: 100%; 
    height: 150px; 
    background: #3167b1; 
    position: absolute; 
    bottom: 0px; 
}

來源

2015-10-22 11:13:11 James

對不起，我忘了澄清的HTML。目前只是用於測試目的的簡單的

。 – user3634781

只需添加到您的CSS：

body { 
    margin: 0; 
    padding: 0; 
    background: #efefef; 
    font-family: 'Lato', serif; 
    padding-bottom: 174px; //add this line - height of footer + margin from content 
}

我加24px的以內容邊距爲例。這將是最好的，如果你這個添加到你的CSS：

* { 
    box-sizing: border-box; 
}

或只是身體

body { 
    box-sizing: border-box; 
}

所以當你添加了補不添加到你的身高，你會得到不必要的滾動條。

來源

2015-10-22 12:20:51

頁腳絕對定位不工作

回答

相關問題