应设min-height: 56px + padding: 12px 16px，配合line-height垂直居中；body必须加padding-bottom: 56px预留空间，避免内容被遮挡，禁用vh单位以防安全区干扰。
固定底部悬浮条的高度怎么设才不显臃肿
直接设 height: 60px 很容易过厚，尤其在小屏或高DPI设备上——视觉重量和实际点击热区不是一回事。关键不是“多高”，而是“多稳+多可用”。
- 推荐用
min-height: 56px+padding: 12px 16px组合，比纯 height 更适应字体渲染差异（比如 iOS Safari 的 bold 字体撑高） - 避免使用
vh单位（如height: 8vh），它在 iPhone X 及后续机型中会把安全区高度也算进去，导致悬浮条实际占据屏幕近 1/5 - 如果内容含图标+文字，优先用
line-height控制垂直居中，而非靠height硬撑；line-height: 32px比height: 48px更轻量且兼容性更好
为什么 padding-bottom 要单独加在 body 上
很多人以为给悬浮条设 bottom: 0 就完事了，结果正文最后一段被遮住——这不是悬浮条太高，而是文档流没预留空间。
- 必须给
body加padding-bottom: 56px（值要 ≥ 悬浮条的最小视觉高度），否则滚动到底部时，文字会从悬浮条底下“穿出来” - 别用
margin-bottom，它会被折叠，尤其在 flex 布局的main元素里不可靠 - 若悬浮条高度响应式变化（比如移动端加大到
80px），用媒体查询同步更新body的padding-bottom，不能只改悬浮条自身
overflow-y: auto 在固定悬浮条容器里为啥不生效
当悬浮条内部是可展开面板（比如带菜单的底部操作栏），常遇到内容溢出但滚动条不出现——问题不在 overflow 属性本身，而在高度上下文缺失。
- 父容器（如
.bottom-bar）必须设max-height: 240px或height: calc(100vh - 56px)，不能只依赖flex: 1 -
overflow-y: auto必须配合display: block使用；若父容器是display: flex，子元素需显式设align-self: stretch才能占满高度 - 慎用
vh计算高度：iOS Safari 在地址栏收起/展开时会重算vh，造成滚动区域跳变；更稳的是用max-height: 70dvh（dvh是动态视口单位，2023 年起已广泛支持）
移动端点击区域太小却误判为“悬浮条太厚”
用户反馈“底部按钮太厚、占地方”，实际是触摸热区不足导致反复点击，系统自动放大反馈区域，视觉上显得膨胀。
- WCAG 要求最小点击尺寸为
44px × 44px，但悬浮条本身高度只有56px，意味着左右留白必须严格控制——建议设width: max-content+padding: 0 20px，避免全宽拉伸 - 图标按钮务必用
width: 56px; height: 56px;显式限定，不要依赖font-size或em，否则 Android Chrome 和 iOS Safari 渲染偏差可达 ±8px - 若悬浮条内含多个操作项（如三个 icon），用
gap: 12px替代margin，防止在缩放或强制字体大小下间距崩塌
真正难控的不是数字，而是不同设备对“高度”的感知一致性：iPhone 的状态栏高度、Android 的导航键、折叠屏的 hinge 区域，都会让同一个 56px 在视觉重量和交互反馈上完全不同。与其调一个全局高度，不如按设备能力分层处理——比如检测 env(safe-area-inset-bottom) 后动态补高，比硬编码更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
