JSFiddle Demo

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*/
  }

有关示例，请参阅以下编码：

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>

这里是CSS：

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

position：fixed 允许我根据浏览器视口给页脚一个位置。
bottom：0 表示页脚与浏览器视口底部之间的间隙为0 z-index：100 确保页脚高于z-index较小的任何其他内容。

屏幕底部的页脚，上下文应在其下方滚动

3 个答案:

JSFiddle Demo