.post { padding-bottom: calc(64px + 24px); }
@media (max-width: 480px) { .brand-badge { display: none; } }
文章末尾加了一个固定在右下角的品牌角标,64x64,手机上盖住正文最后一行,读者反馈文末那半句话看不到。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。
原因不复杂,角标用 position: fixed 贴在视口右下,和正文流没有关系,内容滚到底时正好被压住。容器也没有为它留出下边距。
「角标遮挡」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。
一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。
处理上按这个顺序:给正文容器加 padding-bottom 用量等于角标高度加间距;小屏上把角标缩到 48 或者干脆隐藏;用 IntersectionObserver 判断到底部时再显示;真机滚到底看最后一行是否完整。
改完只确认一件事:手机滚到文末最后一行完整可见 角标不再压住文字。
