直接写 height: 100% 在移动端常失效，因 ios safari 对 html/body 高度解析有隐式限制，需显式设置 html, body { height: 100%; margin: 0; } 并配合 position: relative 和单位合理选择（rem 用于固定区域，% 用于弹性区域）来确保布局稳定。
为什么直接写 height: 100% 在移动端经常失效
因为移动端浏览器（尤其是 iOS Safari）对 html 和 body 的高度解析有隐式限制：如果父元素没显式高度，100% 会按内容撑开，而不是视口高度。结果就是子元素用 top: 20% 或 bottom: 5rem 时，百分比基准错乱，iOS 上偏移量忽大忽小。
必须手动“激活”高度链：
-
html, body { height: 100%; margin: 0; }—— 清除默认 margin 并锁定根高 - 最外层容器加
position: relative;—— 为内部absolute元素提供定位上下文，否则它们会相对于 viewport 定位，受地址栏缩放、软键盘弹出等干扰 - 避免只设
height: 100vh—— iOS Safari 中vh会把地址栏高度算进去，键盘弹出时视口高度突变，导致布局跳动
bottom 值该用 rem 还是 %？
看固定区域是否随屏幕缩放变化。比如底部按钮总高 + 间距 = 5rem，这个值在 iPhone SE 和 iPad 上视觉大小一致，适合用 rem；但如果你的“地图区域”要占屏高 70%，就得用 %，否则小屏上内容被压缩、大屏上留白过多。
混用时注意顺序：
- 先用
rem锁定固定部分（如底部按钮、顶部导航），再用%分配剩余空间 -
.map { bottom: 18rem; }是安全的 —— 它不依赖父容器高度计算，只和根字体大小挂钩 -
.business { bottom: 5rem; height: calc(100% - 18rem); }就危险 ——calc()里混合单位在某些 Android WebView 版本中解析失败
绝对定位后内容溢出或被截断怎么办
常见现象：.map 里地图 canvas 拉伸变形、.business 列表滚动卡死。根本原因是 absolute 元素脱离文档流，父容器无法感知其真实尺寸，overflow: hidden 又直接剪裁。
解决路径很窄，只有两个可靠选择：
- 给绝对定位容器明确设
height（不能是auto），比如height: 60vh;或height: calc(100% - 5rem);（前提是父容器已设height） - 用
overflow-y: auto替代hidden，但需加-webkit-overflow-scrolling: touch;保证 iOS 滚动流畅 - 千万别信
min-height: 100%—— 在absolute下它无效，浏览器直接忽略
iOS 和安卓表现不一致的根本原因
不是 CSS 写错了，是底层渲染差异：iOS Safari 把软键盘弹出视为“视口缩小”，会重排所有 vh 和百分比；而多数安卓浏览器只是盖层，不影响布局计算。所以你在 iOS 上调好的 bottom: 18rem，到安卓可能发现底部按钮被键盘顶起半屏。
真正能跨平台稳定的方案只有：
- 放弃
vh，全部用rem或px控制固定区域 - 动态监听
window.visualViewport（iOS 16.4+ / Chrome 61+ 支持），在键盘弹出时重新计算bottom值 - 用
position: fixed替代absolute做底部按钮 —— 它不受视口变化影响，但会脱离当前容器上下文，需要单独管理层级
实际项目里，90% 的“高度自适应”问题，其实卡在 html 和 body 没清 margin、没设 height，而不是定位逻辑本身。先检查这两行，比调半天 transform 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
