要让Flex布局占满全屏高度且内容区可滚动，需设置html、body为height: 100dvh；body设display: flex、flex-direction: column；header/footer固定高度，main用flex: 1和overflow-y: auto。
要让 Flex 布局在 HTML5 中占满全屏高度，同时内容区域可滚动，关键不是“给子元素设 height: 100%”，而是用 flex 分配 + 明确高度约束 来控制空间流向。浏览器只有知道“总高度多少”“哪些部分固定”“哪些部分可伸缩”，才能正确触发滚动。
父容器必须有明确的全高约束
不能只写 height: 100%，因为它的祖先（如 html、body）默认没有高度。需显式设置：
-
html, body { height: 100dvh; margin: 0; }—— 推荐用dvh（动态视口单位），适配移动端地址栏收起/展开 - 或退而求其次：
html, body { height: 100vh; margin: 0; } - 外层 Flex 容器加
display: flex; flex-direction: column;，并确保它直接撑满 body
子容器用 flex: 1 占据剩余空间
假设结构是 header + main + footer，其中 main 需滚动：
-
header, footer设固定高度（如height: 60px）或flex: 0 0 auto -
main设flex: 1; overflow-y: auto;—— 这表示“拿走所有剩余空间，内容超了就纵向滚动” - 注意：若 main 内还有子元素（比如 article），需确保它不破坏 flex 分配，必要时加
min-height: 0（防止被内容撑开，让 flex: 1 真正生效）
内容区滚动要真正可用，得避免隐性溢出失效
常见失效原因：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- main 的子元素写了
height: 100%，但父级没设定高度上下文 → 滚动条不出现 - 忘了给 main 设
overflow-y: auto（只设overflow: auto也行，但更推荐明确方向） - 用了
flex: 1却没限制父容器高度 → flex 项无法计算“剩余空间”，直接按内容高度渲染
一个极简可运行示例
复制到 HTML 文件中即可验证：
<style>
html, body { height: 100dvh; margin: 0; }
body { display: flex; flex-direction: column; }
header { height: 56px; background: #333; color: white; }
main { flex: 1; overflow-y: auto; padding: 16px; }
footer { height: 48px; background: #555; color: white; }
</style><header>顶部</header><main><p>很多段落…</p>
<p>一直拉到底</p></main><footer>底部</footer>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
