vh和100%height的区别
vh 和 % 是 CSS 中两个看起来很像但基准完全不同的单位：
1. height: 100vh (Viewport Height)
- 基准：浏览器可见窗口 (Viewport) 的高度。
- 含义：“不管父元素是谁，不管父元素有多高，我都要占满整个屏幕的高度。”
- 场景：做全屏 Banner、全屏应用的登录页、Splash Screen。
- 例子：如果你手机屏幕高 800px，
100vh就是 800px。
2. height: 100% (Percent)
- 基准：父元素 (Parent Element) 的高度。
- 含义：“如果是爸爸给我 200px 的空间，我就占 200px；如果你爸爸也是
auto（高度随内容变化），那我也就不知道该多高了，大概率会失效。” - 场景：在已经定高的卡片里填满内容。
- 常见坑：如果父链条上有一个元素没设高度，
100%就会断掉失效。这就是你刚才遇到heroSection没撑开的原因。
一图胜千言
Browser Window (800px)
┌──────────────────────────────┐
│ <body> (height: auto = 0px) │
│ ┌────────────────────────┐ │
│ │ <div> │ │
│ │ height: 100vh │ │ ──► 我不管 body 高度，直接撑满 800px！
│ │ │ │
│ └────────────────────────┘ │
│ │
│ ┌────────────────────────┐ │
│ │ <div> │ │
│ │ height: 100% │ │ ──► body 高度是 0（没定高），所以我也 0px。
│ │ │ │ (看起来就像消失了一样)
│ └────────────────────────┘ │
└──────────────────────────────┘
总结：如果你想让一个块占满屏幕，无脑用 100vh；如果你想让一个块填满它的容器，用 100% (但前提是容器得有高度)。