在页面底部的页脚，上下文应该在其下滚动

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。