如何在页面底部之后添加不同的背景颜色？

Question

基本前提：我使用的是MacOS，像许多围绕触摸屏或触摸板构建的移动平台一样，滚动是“有弹性的”。也就是说，如果你滚动到页面的开头或结尾，你可以带着有弹性的感觉稍微滚动过去。（如果我缺少一些官方术语，那我很抱歉。）

我设计了一个白色背景的页面，但底部页脚是黑色的。我知道这是一个小细节，但我认为，如果页面底部的区域具有与页脚相匹配的黑色背景颜色，会看起来非常好。

问题：有什么办法可以实现这个目标吗？具体而言，我的页面底部超出部分的背景颜色是否可以与页面其余部分的背景颜色不同？

- Aaron Beaudoin

---

你可以始终在所有元素周围创建另一个 div，并为该 div 和 body 设置背景颜色和填充。这是你的意思吗？ - undefined

这被称为“overscroll”，理论上，CSS有一种方法可以停止它。 - undefined

虽然，你应该知道在IOS Safari上不支持过度滚动。 - undefined

@askingforafriend 目前，我提供了MDN的链接，以便原帖作者（以及后来的访问者）可以在页面底部查看支持的浏览器列表，这个列表可能会随着时间的推移而发生变化。 - undefined

Answer 1

你可以为HTML设置背景颜色，也可以参考这个链接：https://peter.coffee/htmls-background-color。

相关的（CSS）部分如下：

html {
  background-color: $header-footer-color;
}

body {
  background-color: $maybe-white;
}

如果您希望标题和页脚有不同的颜色，您可以使用渐变；来源：https://gist.github.com/peterramsing/d3ba8502730471691f73361f0490a185#gistcomment-3512344

- JiFus

---

试过了。看起来渐变仍然会在页面滚动时超出边界，所以这个解决方案不起作用。另外，我的页眉和页脚有不同的颜色，所以一个与页眉匹配的纯色背景是目前我能做到的最好的选择。 - undefined

确实，在iOS上，线性渐变不起作用，只能使用背景颜色。 - undefined

2023年了，HTML的渐变背景在iOS上仍然无法正常工作... - undefined