问题说明

• 一个网页，整体是白色。footer 是深色块。

• 可能是由于上方的内容都是用 em 等单位，导致有非整数。底部（ footer 下方）偶尔会出现 1px 的空白，露出 body 的底色。猜测可能是上方出现了小数点和奇数，而 body 自动取了整数，2or3 的倍数（高分屏 2/max 屏 3 ）。

  • 修正：测试给 body 加个 after 固定在底部，仍旧有 1px 边距。所以很可能 body 高度也不是整数，这条缝是外面那个容器的。而那个容器自动使用了 body 的底色。

• 同时有另一个问题是，底部深色，在橡皮筋效果下上拉会露出 body 的白色背景（希望是 footer 的延申）。

• 而且 safari 在下方出现工具条的时候，工具条是在 body 底色上加一个半透明磨砂，而不是 footer 的延申。

期望的调整方案

• 试图给 footer 下面 absolute 定位一个色块，作为 footer 的延申。但是 body 以外的部分貌似无法显示。overflow 没用。但底部工具条的背景色的确是 body 的背景色。感觉有点像小程序的 page 的概念，有一个未知的容器在那边。

• PS：各个浏览器还有些不同。

  • 微信浏览器中，上拉的话是 body 上拉（底部 1px 误差还在），但下面露出的是浏览器默认的深灰色。
  • safari 的话我截了个图（为了识别改了 body bg yellow ）。

• 单就底部 1px 的问题，我考虑一种方法是写 js 凑整，或者在 body 底部固定一个色块补掉。

• 但联系到工具条背景色和页面上拉过头的背景色的问题，如果有整体的解决方案就更好了。

• 不晓得大家有没有碰到过这个问题，有没有好的解法。