【问题标题】：Footer on bottom of screen, context should scroll underneath it屏幕底部的页脚，上下文应在其下方滚动
【发布时间】：2015-04-27 17:35:57
【问题描述】：

我一直试图让它工作一段时间，但我似乎无法找到适合我确切问题的答案。

我希望在屏幕底部有一个页脚(-image)，向下滚动时它应该留在屏幕底部。这意味着页脚应该在内容上方。

我已经尝试了几次，但每次我使用它时，页脚在开始时位于屏幕底部，但当我开始滚动时，它与页面顶部保持相同的距离（意思是它在屏幕上向上滚动）。

有解决办法吗？

【问题讨论】：

标签： css footer

【解决方案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*/
}

例如，请参见下面的代码：

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

【讨论】：

我以为我已经尝试过了，但这次成功了！非常感谢！我想我上次犯了一些愚蠢的错误。
@Jelle 每个人都会时不时犯一些愚蠢的错误。很高兴我能帮上忙！

【解决方案2】：

postion:fixed 和 z-index: 10（示例值 - 确保页脚不会被其他对象覆盖

【讨论】：

【解决方案3】：

我猜你的 HTML 是这样的：

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

这是 CSS：

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

position: fixed 允许我给页脚相对于浏览器视口的位置。
bottom: 0 表示页脚和浏览器视口的底部将为 0。
z-index: 100 确保页脚位于具有较小 z-index 的任何其他内容之上。

【讨论】：