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

我正试图通过以下方式提高我的页面高度：

html {
    height: 1000px;
}

这正是我想要的，但我的页脚有问题。我想把它放在底部，但是 我不一定希望它随着滚动移动。也就是说，用户必须向下滚动才能看到页脚

这就是我得到的：

html:

当我将<代码>位置<代码>改为<代码>相关< /代码>时，页脚位于屏幕中间，因为它相对于其他元素定位。不太好

---

如何在屏幕底部创建页脚而不使其随滚动一起移动？

使用

位置：相对至车身和
位置：绝对到页脚


正文{
高度：1000px；
边框：1px纯红；
位置：相对位置；
}
页脚{
位置：绝对位置；
背景色：#00cca3；
底部：0；
高度：80px；
垫底：20px；
宽度：100%；
}


使用
位置：相对至车身和
位置：绝对到页脚


正文{
高度：1000px；
边框：1px纯红；
位置：相对位置；
}
页脚{
位置：绝对位置；
背景色：#00cca3；
底部：0；
高度：80px；
垫底：20px；
宽度：100%；
}


< /代码> 您可以考虑使用，这里有一个工作片段：


html，正文{高度：100%}
身体{
显示：网格；
对齐内容：之间的空间；
保证金：0；
}
页脚{背景：#CCC}
内容
这是页脚

< /代码> 您可以考虑使用，这里有一个工作片段：


html，正文{高度：100%}
身体{
显示：网格；
对齐内容：之间的空间；
保证金：0；
}
页脚{背景：#CCC}
内容
这是页脚

你需要使用
位置：固定
并将顶部和右侧设置为正确的位置。它无论如何都不会移动。
你需要使用
位置：固定
并将顶部和右侧设置为正确的位置。它无论如何都不会移动。
你尝试过
位置：绝对
吗？你尝试过
位置：绝对
吗仅当我选择“已修复”
时有效。如果我使用<代码>绝对< /代码>或<代码>相关< /代码>，它就在屏幕中间。然后可能有另一个元素正在使用<代码>相关< /代码>位置，您必须检查这就是它位于中间的原因。如果在父级上方有任何相对位置，则必须进行检查。属性<代码>位置：绝对
肯定会起作用，此属性是针对这些情况创建的。在我这方面，它仅在我选择
fixed
时才起作用。如果我使用<代码>绝对< /代码>或<代码>相关< /代码>，它就在屏幕中间。然后可能有另一个元素正在使用<代码>相关< /代码>位置，您必须检查这就是它位于中间的原因。如果在父级上方有任何相对位置，则必须进行检查。属性<代码>位置：绝对
肯定会起作用，此属性适用于这些情况。
<footer class="footer">
   <p>...</p>
</footer>

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