全屏布局必须先重置html和body的margin/padding并设height: 100%，再配合viewport标签、优先使用100dvh降级100vh，且语义化标签需父容器启用flex/grid才能撑满高度。
全屏布局不是把 height: 100vh 往 body 上一贴就完事——HTML 文档结构本身会直接卡住你，尤其当语义化标签嵌套不规范、或 html/body 没被“驯服”时。
html 和 body 必须显式接管高度控制
浏览器默认让 body 高度只包裹内容，html 也不自动占满视口。哪怕你给最外层容器写了 height: 100%，它向上查不到有效高度来源，最终算出来还是 0。
-
html, body { margin: 0; padding: 0; height: 100%; }是最基础、最稳的起点 - 如果用
100vh，优先写成height: 100dvh; height: 100vh;，新浏览器走 dvh，老浏览器 fallback 到 vh - 别只设
body { height: 100vh; }—— 它不继承父级html的尺寸，且 iOS Safari 地址栏收起时会失准 - 所有涉及全屏的容器（比如
.app或#root），必须明确声明min-height: 100vh或height: 100dvh，不能靠子元素撑高
语义化标签不能替代尺寸约束
<header>、<main>、<footer> 这些标签只是语义容器，浏览器不会因为用了它们就自动给你分配高度或网格轨道。它们默认是 block 元素，仍走文档流，高度由内容决定。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 想让
<main>占满剩余空间？得配合父容器是 flex/grid，并设flex: 1或grid-area - 直接对
<header>写height: 60px没问题；但对<main>只写height: 100%，若父级没高度，它照样塌缩 - 避免在
<body>直接套<section>然后指望它全屏——先确保body有高度，再让它成为 grid/flex 容器
viewport 标签缺失会导致移动端全屏失效
没有 <meta name="viewport">，iOS Safari 和部分 Android 浏览器会把地址栏高度计入 vh 计算，页面加载后地址栏收起，视口突然变高，内容被顶出或留白。
立即学习“前端免费学习笔记（深入）”；
- 必须加：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 如需禁用缩放（管理后台常见），可加
maximum-scale=1.0, user-scalable=no，但阅读类页面慎用 - 这个标签必须放在
<head>最前面，否则可能被浏览器忽略 - 仅靠 CSS 无法修复 viewport 缺失引发的
100vh偏差，JS 补偿也难覆盖所有时机
最容易被忽略的是：全屏布局中，html 和 body 不是“背景板”，而是第一级尺寸锚点；一旦它们没被显式归零并赋高，后面所有基于百分比或视口单位的计算都会从根上漂移。
