在 css 中为 div 设置超大固定高度（如 `height: 1000000px`）虽能“临时”绕过布局问题，但会引发内存占用、重排重绘开销及潜在卡顿，严重损害性能，应坚决避免。
在实际开发中，偶尔会遇到因父容器高度塌陷、Flex/Grid 行为异常或滚动上下文错乱导致的布局难题。此时，有人可能尝试用极端手段“强制撑高”容器——例如将 <div> 的 height 设为 1000000px（一千万像素），并依赖 overflow: hidden 隐藏溢出内容，误以为“看不见就等于没影响”。但这种做法在技术上是危险且反模式的。
❌ 为什么 height: 1000000px 是坏实践？
尽管该 div 在视觉上不可见（无滚动条、无内容溢出），浏览器仍需完整执行以下渲染流程：
- 内存分配：浏览器会为该元素及其渲染树节点分配与尺寸匹配的内存空间，即使内容为空，也可能触发数 MB 的布局缓冲区预留；
- 布局计算（Layout）：CSS 引擎需精确计算该元素的位置、尺寸及所有后代元素的相对关系。若其内含子元素（尤其是嵌套较深或数量较多的结构），布局耗时呈非线性增长；
- 绘制准备（Paint）：即使 overflow: hidden，浏览器仍可能为该区域生成离屏绘制图层（尤其在启用 will-change, transform, 或存在 box-shadow 等合成属性时），增加 GPU 内存压力；
- 滚动性能隐患：一旦页面发生任何触发滚动重计算的操作（如动态添加内容、resize 事件、position: sticky 元素更新），该巨型元素会显著拖慢 scroll 帧率，尤其在中低端移动设备上易出现掉帧甚至卡死。
? 实测提示：在 Chrome DevTools 中开启 Rendering → Paint flashing 或 Performance 面板录制，可直观观察到 1000000px 元素引发的大面积强制重绘区域和长任务（Long Tasks）。
✅ 推荐替代方案
| 场景 | 正确做法 | 示例 |
|---|---|---|
| 父容器需要“自适应高度”但内容塌陷 | 使用 display: flow-root 或 overflow: hidden 触发 BFC | <div style="display: flow-root;">...</div> |
| 需占满视口高度 | 使用 height: 100vh 或 min-height: 100vh | <div style="min-height: 100vh;">...</div> |
| Flex/Grid 容器内子项需撑满剩余空间 | 使用 flex: 1 或 flex-grow: 1 | <main style="flex: 1;">...</main> |
| 需隐藏内容但保留布局占位 | 使用 visibility: hidden 或 opacity: 0（非 display: none） | <div style="visibility: hidden;">...</div> |
? 绝对禁止的“捷径”
/* ❌ 危险：无意义的超大数值，无语义、无可维护性、性能黑洞 */
.bad-container {
height: 1000000px; /* 不要这样做！ */
overflow: hidden;
}
/* ✅ 清晰、可控、高性能的替代 */
.good-container {
min-height: 100vh; /* 明确意图：至少一屏高 */
/* 或 */
height: fit-content; /* 内容自适应（现代浏览器支持） */
}? 总结
height: 1000000px 不是“黑魔法”，而是性能地雷。它暴露的是对 CSS 布局机制（BFC、Flex、Grid、视口单位等）理解的缺失，而非问题本身的复杂性。真正健壮的解决方案永远建立在语义化结构、合理盒模型控制和现代 CSS 特性之上。请始终牢记：看不见的渲染开销，比看得见的 Bug 更致命。 重构代码前，先打开 DevTools 的 Performance 面板——让数据代替直觉做判断。
