爲什麼不使用位置：固定爲「粘性」頁腳？

我見過Ryan Fait's粘性頁腳的方法以及一個here和here。爲什麼不使用位置：固定爲「粘性」頁腳？

爲什麼這些人爲#footer{position:fixed; bottom:0;}就足夠製作粘腳的模板？

編輯：

我會補充說，使用position: fixed;的頁腳也打破margin: auto;中心（至少）某些瀏覽器，從而爲包裝標籤的需求。我上面提到的方法的一部分問題是額外的標籤混亂，語法不正確（對於「HTML純粹主義者」），並且它會消耗帶寬。然而，在我看來，頁腳周圍的單個包裝仍然比一個混亂的頁面模板要好。而且，「我的」方式更直接，帶寬更少。

來源

2010-02-15 Moshe

粘性頁腳是當內容不是很高時粘到窗口底部的粘性頁腳，但是當內容高於窗口高度時，頁腳的行爲與普通頁腳相似，在內容下面被壓低，因爲固定的位置會給你，浮在內容之上。它可能是這樣的位置：固定是你想要的效果，但它不是什麼粘腳的嘗試和實現。就我個人而言，我認爲爲技術shodul發佈的演示頁面有高和低的示例頁面，以更好地說明效果。 – wheresrhys 2010-02-16 10:45:59

@wheresrhys - 你有一個好點，在這種情況下，這整個線程需要重新考慮。關於'position：絕對;底部：0;'對於你那種粘性的頁腳？ – Moshe 2010-02-16 12:47:25

也不會工作，因爲它會重疊你的內容的底部（除非你添加填充，但結合內容的高度100％將導致永久滾動條出現）。爲了阻止它這樣做，我認爲你需要實現你所鏈接的解決方案之一。 – wheresrhys 2010-02-16 14:25:37

使用position: fixed和Ryan Fait's method 之間的區別是相當重要的。

當使用position: fixed時，頁腳是總是可見的，這並不是粘性頁腳試圖做的事情。
如果內容長度超過視口高度，則粘性頁腳的含義是保持粘貼到底部，除外。在即的情況下，粘滯頁腳將表現得像一個正常頁腳，出現在頁面內容的正下方。

Here you can see the effect一個粘腳。在結果窗口中，您會看到頁腳停留在頁面的底部。點擊「添加內容」按鈕添加內容，然後您將看到頁腳向下移動以保持在內容下方。

^{1.這是2013 1月10日從自由之路機快照，作爲瑞安的網站本身不包含原始訊息的任何更長的時間。}

來源

2012-06-14 19:27:28

這篇文章中的兩個鏈接都已經死了。 – Script47 2018-02-15 10:35:47

@ Script47我明白了。我會嘗試恢復或重定向鏈接到mcemperor.nl，我也將替換鏈接到Ryan的粘性頁腳。 – 2018-02-15 11:04:02

你可以檢查Internet Archive是否有任何東西？我很欣賞你更新了這樣一箇舊的答案。 – Script47 2018-02-15 11:25:16

好「大棒」與我在這個答案:) 你的方法和粘頁腳方法之間的唯一區別，如其他答覆中提到，就是粘頁腳只出現下面的所有主要頁面內容並且從不包含頁面內容。

因此，要解決您所做的一切就是使主頁面內容在一個簡單的div封裝中設置一個位置：relative; top：0px; left：0px;並使z-index大於頁面的原始大小。由於這個div包裝頁面內容，唯一的變化是它被放置在原始頁面元素之上，因爲z-index更高。然後，將頁腳放置在html的位置：fixed; bottom：0px;並使z-索引小於頁面內容和TA-DA！頁腳不會出現在頁面內容的上方。要做到這一點，頁面內容必須有不透明的背景來覆蓋頁腳。

注意：這和「粘性」頁腳之間還是有一點區別 - 當您向下滾動時，粘性頁腳不會像頁面內容的「底部」一樣「滑動」。但是，由於這只是一個小的用戶界面差異，我認爲上述方法在粘性頁腳的簡單性和性能方面更勝一籌。而且，有些人可能會認爲，如上述方法，頁腳「滑出」會更好。

我認爲這應該完全回答你的問題。

來源

2015-07-14 17:20:38 edwardtyl

爲什麼不使用位置：固定爲「粘性」頁腳？

回答

相關問題