html - 将页脚保持在底部（页脚不必随滚动而移动）

Question

我试图给我的页面额外的高度：

html {
    height: 1000px;
}

这可以满足我的要求，但页脚有问题。我希望它在底部，但我不一定希望它随着滚动而移动。意思是，用户必须向下滚动才能看到页脚。

这就是我所拥有的：

html:

<footer class="footer">
   <p>...</p>
</footer>

CSS：

footer {
    position: fixed;
    background-color: #00cca3;
    bottom: 0;
    height: 80px;
    padding-bottom: 20px;
    width: 100%;
  }

当我更改position为relative页脚时，它位于屏幕中间，因为它相对于其他元素定位。不好。

如何在屏幕底部实现页脚而不让它与滚动一起移动？

标签： htmlcss

Answer 1

您需要使用position:fixed并将顶部和右侧设置为正确的位置。无论如何它都不会移动。