在頁面底部的頁腳，上下文應該在其下滾動

Question

我一直在試圖讓這個工作一段時間，但我似乎無法找到適合我的確切問題的答案。

我想在屏幕的底部找到一個頁腳（-image），當它向下滾動時它應該停留在屏幕的底部。這意味着頁腳應該超出內容。

我已經嘗試了這幾次，但每次我使用它的時候，頁腳都是在開始的屏幕底部，但是當我開始滾動時，它停留在相對於頁面頂部的相同距離處這意味着它在屏幕上向上滾動）。

有沒有解決方案呢？

Answer 1

是的，這是很容易使用postion:fixed;：

<footer>I Stay Fixed!</footer> 

footer{
position:fixed;/*Fixes the footer so it cannot scroll*/
bottom:0;/*Fixes the footer to the bottom of the content window*/
z-index:999;/*Places the footer above all other elements with smaller z-index*/
}

舉一個例子，SE Ë下面的編碼：

footer{ 
 
    position:fixed; 
 
    bottom:0; 
 
    width:100%; 
 
    height:40px; 
 
    background:red; 
 
    } 
 
.content{ 
 
    height:1000px; 
 
    background:green; 
 
}

<div class="content">Content</div> 
 
<footer>I Stay Fixed!</footer>

JSFiddle Demo

Answer 2

postion:fixed和z-index: 10（例如價值 - 以確保頁腳不會被其他物體

Answer 3

得到覆蓋我猜你的HTML是這樣的：

<footer> 
    <img src="footer_image.jpg" /> 
</footer> 

她E公司的CSS：

footer 
{ 
    position: fixed; 
    bottom: 0; 
    z-index: 100; 
} 

位置：固定讓我給頁腳的位置相對於瀏覽器窗口。
底部：0指頁腳和瀏覽器窗口的底部之間的間隙將是0
的z-index：100確保頁腳是上述的任何其他內容具有較小z-index。