底部固定悬浮条必须用position: fixed，因其能始终钉在视口底部不随滚动偏移；flex/grid仅实现文档流内沉底，页面高度不足或动态加载时会失效，且fixed元素须为body直接子元素、设bottom/left/right三值、固定height并配body padding-bottom等全套约束。
底部固定悬浮条必须用 position: fixed，不能靠 flex 或 grid
因为“悬浮”意味着它要始终钉在视口底部、不随内容滚动，而 flex 和 grid 实现的是文档流内的“沉底”，属于页面布局逻辑，不是悬浮。一旦页面高度不足或内容动态加载，flex: 1 就会失效，footer 会跟着内容上浮——这不是你想要的悬浮效果。
常见错误是把 footer 同时加 position: fixed 和放进 main 里，结果它既脱离文档流又参与 flex 分配，造成定位错乱或重复渲染。
-
position: fixed元素必须是body的直接子元素（或至少不被 transform/overflow:hidden 父级包裹） - 必须写全三件套：
bottom: 0、left: 0、right: 0，缺一不可；只写bottom: 0会导致宽度收缩 - 不要给它设
top或margin-top，这些会覆盖bottom定位
height 必须用固定值，别碰 vh 或百分比
Safari 在地址栏收放时会重算 100vh，导致悬浮条高度跳变——哪怕只跳 2px，用户也会明显感知“抖动”。这不是 bug，是 Safari 对视口单位的实现机制决定的。
56px 是移动端底部导航的行业共识值（Material Design + iOS HIG 都推荐），桌面端可用 48px 或 60px，关键是保持一致。
- 写死
height: 56px，同时配line-height: 56px（如果含单行文字）或display: flex; align-items: center - 避免
min-height或max-height，悬浮条高度必须确定，否则会影响body的padding-bottom计算 - 图标用
width/height显式控制，别依赖font-size或em，字体加载差异会导致高度浮动
body 的 padding-bottom 必须等于悬浮条高度
这是最容易漏掉的一环：fixed 元素脱离文档流，不占空间，但内容会从视口最底部开始渲染，直接顶到悬浮条下面——结果就是最后一行文字被遮住，用户以为内容“没了”。
这个 padding-bottom 是给内容留的安全区，不是装饰，也不能靠 JS 动态计算（有竞态风险）。
- 如果悬浮条高
56px，就写body { padding-bottom: 56px; } - 不要用
margin-bottom加在最后一个子元素上——页面结构一变就失效 - 若存在多套悬浮层（如底部导航 + 右下反馈按钮），取最大高度值，别叠加
- 注意：这个
padding-bottom不影响打印样式，如需适配打印，用@media print覆盖
移动端触摸热区和 iOS 键盘错位问题
悬浮条里塞 input 或 textarea 是高危操作。iOS Safari 弹出键盘后，视口高度重算，fixed 元素可能卡在半空或完全消失——这不是 CSS 能修的，是 WebKit 的已知限制。
另外，纯色圆形按钮在复杂背景上极易看不见，且手指点不准，这本质是可访问性缺陷，不是样式问题。
- 悬浮条只放按钮、链接、图标等非输入控件；输入需求移至弹层或新页
- 按钮本身设
width: 56px; height: 56px;，用flex居中图标，确保 WCAG 要求的 44×44px 触摸热区 - 加
box-shadow: 0 -2px 8px rgba(0,0,0,0.1)或浅边框，提升视觉识别度 - 必须加
cursor: pointer（桌面）和touch-action: manipulation（移动端），否则部分安卓 WebView 会延迟 300ms 响应点击
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
