我無法讓頁腳停留在頁面的底部。

我似乎無法使頁面上的頁腳停留在底部，並且在我想添加更多內容時不斷將其壓下。現在我知道這個問題已經被問了大約一百萬次，並且我已經閱讀了很多教程並觀看了關於這個主題的幾個視頻。我無法讓頁腳停留在頁面的底部。

但是，我似乎無法使其工作。我不知道我做錯了什麼。頁腳似乎只留在一個地方。我知道對於這裏的某個人來說，你會發現一個很容易修復的明顯錯誤。但是，我不是一個專業的網頁設計師。事實上，這根本不是我的工作。但我總是喜歡學習如何做事，而且我的網站看起來很棒（至少對我來說）。在我的生活中，我無法弄清楚這個問題出了什麼問題。

我應該從粘貼頁面的整個編碼開始嗎？

來源

2015-09-04 Levant

不要發佈所有的代碼，只是與你的頁腳相關的代碼和發生了什麼問題，但是，你應該一定要發佈代碼，甚至更好，也發佈jsFiddle。 – Aeolingamenfel

我不知道什麼是jsFiddle。 – Levant

http://jsfiddle.net/是一個網站，可讓您與其他人分享您的代碼，並讓他們輕鬆使用它 –

我會先從：

.myStyle{ 
     position:absolute; 
     bottom:0; 
    }

如果你想頁腳始終是頁面（即使在向下滾動），你需要使用上可見：position:fixed;

來源

2015-09-04 15:40:12 coozin

我實際上希望在添加內容時將頁腳壓低，因爲並不總是位於窗口底部，而是始終位於頁面底部。我已經從其他教程中複製並粘貼了關於此的代碼，但它似乎不起作用。不過，我知道這個錯誤是我的一部分。 – Levant

哈阿著名的粘頁腳問題。我想我們都曾經過他們的。如果你這樣做>http://ryanfait.com/sticky-footer/你會設法做一個適當的。

另一種解決方案是有一個position:fixed; bottom:0px;請參閱this fiddle但這將意味着您的頁腳將始終顯示在內容上。它將相對於您的窗口而不是您的頁面。

來源

2015-09-04 15:48:03

我不想要一個固定位置頁腳。我需要一個始終位於頁面底部的窗口（不是窗口），並且在向頁面添加新內容時會自動將其壓低到底部。 – Levant

Ryan Fait方法實際上就是我已經使用的方法。我不知道它爲什麼不起作用。 – Levant

退房this fiddle，希望我沒有誤解你的問題。那裏的JS可以忽略，只有CSS和HTML是相關的。

我見過很多人問這個問題，我有太在一個點上，所以我想我會在這裏發表一個全面的答案:)無論如何，解釋：

的HTML：

<div class="wrapper"> 
    <button id="add-content">Add more content</button> 
    <ul class="content"> 
     <li>I am content, destroyer of worlds</li> 
     <li>I am content, destroyer of worlds</li> 
     <li>I am content, destroyer of worlds</li> 
     <li>I am content, destroyer of worlds</li> 
     <li>I am content, destroyer of worlds</li> 
    </ul> 
    <footer> 
     Footer! 
    </footer> 
</div>

而CSS：

body, 
html { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    position: relative; 
    box-sizing: border-box; 
    padding-bottom: 100px; 
} 

footer { 
    height: 100px; 
    background: rgba(0, 0, 0, 0.2); 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
}

所以，內容&頁腳在其周圍的包裝，因爲這是大多數人如何滾動，但它不是必需的，你實際上可以使用body作爲包裝。

現在，關鍵點需要注意：

html, body有height: 100%：塊元素的高度，默認情況下，決定通過它的內容。因此，即使您嘗試將頁腳定位在底部，使用position: absolute; bottom: 0，它實際上也會被推到的第一個非靜態父元素的底部，或者如果沒有非靜態父元素，則底部html/body元素。通過設置height: 100%，我們可以強制body, html元素佔用整個可用視口並忽略內容高度。（您也可以使用min-height: 100%;，但要看哪些瀏覽器要支持）
.wrapper有min-height: 100%：粘元素，你想粘頁腳元素之間，你要確保所有元素有100％的高度，否則他們會崩潰以匹配內容的高度。
.wrapper有box-sizing: border-box; padding-bottom: 100px;：在底部填充是確保如果內容被添加到包裝，它不會落得迷路背後粘頁腳。此填充應匹配頁腳高度，或更大。
footer有position: absolute; bottom: 0;：沒有解釋需要在這裏，我猜。下一點實際上更重要。
.wrapper有position: relative：還記得我說的關於非靜態父母？通過使.wrapper非靜態，我們確保footer在.wrapper內保持，同時保持粘性。

我認爲，包括它，但我建議，在小提琴的有關HTML/CSS玩弄得到什麼事情有清楚的認識，以及如何元素進行交互。

P.S.：在通過你的小提琴時，我注意到有一個.wrapper類，但沒有元素？我建議添加到小提琴（並刪除頁腳內容），它會更容易追查什麼是缺少:)

P.P.S.：退房this fiddle branched from yours，我已經刪除所有不必要的HTML內容後作出以下修改：

新增.wrapper元素周圍所有的主體內容，除了頁腳。

在.wrapper元素底部添加.push元素

從頁腳中刪除了一堆不必要的CSS樣式，將定位更改爲相對。

來源

2015-09-04 16:56:16 godfrzero

哦，兄弟... 好吧，我真的迷路了。我試圖理解這一切，我只是有點得到它。如果我發佈了我的頁面模板的整個編碼，你可以看看它，看看有什麼不對，並做出必要的修改？這不是一個大頁面，但我需要看看究竟需要去哪些地方或改變。我一直在努力解決這一整天，它只是不工作。我看到了你的小提琴，它看起來很漂亮，但我不知道如何將它實現到我的頁面中。 – Levant

@Levant如果你更新你的小提琴就足夠了，我正在努力解決問題。 – godfrzero

@Levant基本上，將'.push'，'.wrapper'元素添加到小提琴中，刪除頁腳內的所有內容和關聯的CSS代碼。這應該減少我們必須經過的代碼量，找出錯誤。 – godfrzero

我無法讓頁腳停留在頁面的底部。

回答

相關問題