height: 100% 失效的根本原因是父容器缺乏高度上下文，必须确保 html、body 及所有中间父级显式设置 height 或 min-height（如 min-height: 100vh），或改用 flex/grid 布局提供明确高度基准。
为什么 height: 100% 在大屏里总是失效？
因为百分比高度依赖父容器有明确高度，而 html 和 body 默认没有高度约束。只写 height: 100% 的容器，实际高度为 0 —— 浏览器根本不知道“100%”是相对于谁。
真正可靠的起点是：html, body { margin: 0; padding: 0; min-height: 100vh; }。注意用 min-height 而非 height，避免内容超长时被截断。
常见错误包括：
- 漏掉
box-sizing: border-box，导致内边距/边框撑出容器，触发意外滚动条 - 给
body加了overflow: hidden却没同步处理子容器的溢出逻辑，结果面板内容被裁切 - 在 Flex 容器上同时设
height: 100vh和flex: 1，造成冗余且可能冲突
顶部固定 + 左侧菜单 + 主内容区的三栏结构怎么写才不卡死？
必须保证所有区域都在同一个 Flex 容器内，否则 flex: 1 拉伸会失效。不能把侧边栏用 position: fixed 单独拎出去 —— 它会脱离文档流，主内容区就找不到“剩余空间”了。
立即学习“前端免费学习笔记（深入）”；
推荐结构：
- 外层容器：
display: flex; flex-direction: column; min-height: 100vh; - 顶部导航：
height: 64px; flex: 0 0 auto; - 主体区域（嵌套）：
display: flex; flex: 1; - 左侧菜单：
width: 240px; flex: 0 0 auto; - 主内容区：
flex: 1; overflow: auto;（关键：加overflow才能局部滚动）
别给主内容区设 min-height，它和 flex: 1 冲突，会导致拉伸失败。
卡片网格用 Flex 还是 Grid？怎么防换行错乱？
如果卡片高度不一致但需要等高对齐，Flex 的 align-items: stretch 更直接；如果要严格控制行列数、响应式列数切换，Grid 更可控。但多数大屏场景下，Flex 更轻量、兼容性更好。
换行错乱几乎都来自 margin 计算偏差：
- 用
gap: 16px替代margin，浏览器自动处理间距，不侵占 flex-basis - 卡片宽度写成：
flex: 0 0 calc(33.333% - 16px);（减去 gap 占位） - 移动端断点改用：
@media (max-width: 768px) { .card { flex-basis: calc(50% - 16px); } } - 绝对不要混用
float和flex，某些旧版 Chrome 会渲染异常
滚动条消失或错位，到底该锁哪一层？
大屏最常犯的错：整个页面滚动，而不是仅内容区滚动。根源是没控制好 overflow 层级。
正确做法：
-
html, body { overflow: hidden; }—— 关全局滚动 - 主内容区（如
.main-content）设overflow-y: auto;，并确保它有明确高度来源（靠父级flex: 1） - 避免在 Flex 容器上设
overflow: hidden，否则子项的overflow-y: auto会被截断 - 如果用了
transform: scale()做缩放适配，记得加transform-origin: 0 0;，否则滚动锚点偏移
复杂点在于：不同设备的视口缩放行为不一致，100vh 在 iOS Safari 中可能包含地址栏高度，实际可用高度小于预期 —— 这时候得用 JS 动态读取 window.innerHeight 补偿，纯 CSS 无法覆盖所有情况。
