理解CSS中的100%和100vh

对比维度	height: 100%	height: 100vh
参照物	父元素已确定的高度（祖先链上第一个有显式高度的盒子）	视口（viewport）高度，与祖先元素无关
是否需要祖先有高度	需要，否则失效（塌陷为 auto）	不需要，始终等于“屏幕可见高度”
*是否包含浏览器地址栏	百分比计算时不受地址栏影响（祖先多高就多高）	100vh 在移动端会包含地址栏/工具栏，可能导致底部被遮挡（iOS Safari 经典问题）
是否随内容滚动而变化	随祖先高度变化而变化	固定为视口高度，不随滚动改变
是否会产生纵向滚动条	不一定，取决于祖先高度	很容易超出 100vh，若同时有 margin/padding 就会触发整页滚动条
典型用途	让子元素撑满已确定高度的父容器（侧边栏、嵌套 flex 子项等）	全屏遮罩、启动页、整屏背景图、Sticky footer 等“一屏高度”场景
兼容性隐患	祖先链上只要有一个高度缺失就失效	移动端浏览器对 vh 的实现差异（iOS Safari、Chrome Android）