关键设置是html、body{height:100%;margin:0;padding:0}，根容器设display:flex;flex-direction:column;min-height:100vh，主内容区用flex:1而非height:100%。
Flex布局让容器撑满视口高度的关键设置
单纯写 height: 100% 不起作用，因为百分比高度依赖父元素有明确高度。真正有效的做法是用 height: 100vh 或结合 display: flex + flex-direction: column 配合 flex: 1 拉伸子项。
常见错误是给 html 和 body 只加 height: 100%，但没处理 margin/padding 或遗漏 box-sizing: border-box，导致实际高度溢出滚动条。
- 必须重置
html, body { margin: 0; padding: 0; height: 100%; } - 根容器（如
#app或.dashboard）设为display: flex; flex-direction: column; min-height: 100vh; - 主内容区用
flex: 1，而非flex: 1 1 auto——后者在某些旧版 Safari 中可能不生效
顶部导航+侧边栏+主内容区的三明治结构怎么写
Dashboard 常见布局是顶部固定高度导航栏、左侧固定宽度菜单栏、中间自适应内容区。Flex 的优势在于不用计算剩余空间，靠 flex 属性自动分配。
注意：侧边栏如果用 position: fixed，会脱离文档流，导致主内容区无法被 Flex 正确包裹——必须全部放在同一个 Flex 容器内才可控。
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
display: flex; flex-direction: column;（垂直布局） - 顶部导航用固定高度（如
height: 64px），不设flex - 主体区域再嵌套一层
display: flex;，左侧菜单设width: 240px;，主内容区设flex: 1; - 避免对主内容区设
min-height，它会和flex: 1冲突，导致拉伸失效
内容区内部卡片网格用 Flex 还是 Grid？
Flex 适合一维布局（单行或单列），Grid 更适合二维卡片网格。但若卡片高度不一致、需等高对齐，Flex 的 align-items: stretch 反而更简单；若要响应式多列+自动换行，flex-wrap: wrap 加 flex-basis 是轻量解法。
容易踩的坑是给卡片设 width: 33.333% 后因 margin 或 border 导致换行错乱——推荐用 gap 替代 margin，并配合 box-sizing: border-box。
- 卡片容器设
display: flex; flex-wrap: wrap; gap: 16px; - 每张卡片设
flex: 1 1 calc(33.333% - 16px);（减去 gap 占位） - 移动端断点改用
flex-basis: calc(50% - 16px);或直接flex-basis: 100% - 不要混用
float和flex，会导致渲染异常
滚动行为失控？检查 flex 容器的 overflow 和 min-height
Dashboard 中常出现整个页面滚动，而不是仅内容区滚动——根本原因是主内容区没限制高度，或父级 Flex 容器未设 overflow: hidden。
典型现象：下拉时顶部导航跟着动，或侧边栏内容溢出遮挡其他区域。这不是 JS 控制问题，纯 CSS 可解。
- 主内容区（即
flex: 1的那个区域）必须设overflow-y: auto; - 它的父容器（即嵌套的横向 Flex 容器）建议加
min-height: 0;——这是 Chrome/Firefox 的 flex 子项最小尺寸默认行为，不设会导致flex: 1失效 - 避免在
body上设overflow: hidden，否则会截断弹窗、Tooltip 等绝对定位元素 - 调试时用浏览器 DevTools 检查 computed styles 中的
flex-basis和flex-shrink是否为预期值
Flex 实现自适应高度 Dashboard 的核心不在技巧多，而在每一层容器的 height、min-height、flex 三者是否形成闭环。最易忽略的是嵌套 Flex 容器中父项未设 min-height: 0，导致子项 flex: 1 被“撑开”失效——这个点在 Safari 和旧 Edge 中尤其明显。
