HTML网页满屏布局的简单实现代码-html教程-PHP中文网

最常用且有效的方法是使用 height: 100vh，但需清除 html 和 body 默认 margin 并设 height: 100%；有固定头部/底部时应改用 calc(100vh - 已知高度)；移动端 safari 存在 vh 动态更新问题，推荐 dvh 或 js 动态设置 --vh 变量。

html网页满屏布局的简单实现代码

用 `vh` 单位让容器撑满视口高度

直接用 height: 100vh 是最常用也最有效的办法，它让元素高度等于当前浏览器窗口可视区域高度。注意不是 100% —— 那个依赖父元素高度，而父元素往往没设高，结果就是“啥也没撑开”。

html 和 body 默认有 margin，记得清掉：
```
html, body { margin: 0; height: 100%; }
```
如果页面有固定 header 或 footer，别全用 100vh，否则会溢出滚动条；改用 calc(100vh - 60px) 减去已知高度
移动端 Safari 对 vh 的处理有 bug（地址栏收放时值不更新），真要兼容得监听 resize 或改用 dvh（但 IE/旧安卓不支持）

Flex 布局实现真正“自适应满屏”

当内容需要居中、等高或动态分配空间时，display: flex 比纯 vh 更可靠。根容器设为 flex，子项用 flex: 1 自动填满剩余空间。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

必须给 html 和 body 设 height: 100%，否则 flex 容器没高度基准

常见写法：

body { display: flex; min-height: 100vh; margin: 0; }

.main { flex: 1; }

避免在 flex 容器里混用 height: 100vh，容易触发双重计算导致滚动条或空白

避免 `position: fixed` 的隐性陷阱

有人用 position: fixed; top: 0; left: 0; width: 100%; height: 100% 强行满屏，这确实能铺满，但会脱离文档流，导致：内容无法滚动、z-index 管理混乱、打印样式失效、无障碍阅读中断。

仅适合模态框、遮罩层这类“覆盖层”，别用在主内容区
如果用了，记得加 overflow: auto 到内部容器，否则内部内容溢出就看不见了
手机端双击缩放、键盘弹起时，fixed 元素可能错位，调试困难

响应式下 `100vh` 在 iOS Safari 的真实表现

iOS Safari 的 vh 值是基于“初始视口高度”计算的，地址栏隐藏后实际可视区变大，但 vh 不更新，导致底部留白。这不是 bug，是规范行为。

临时解法：用 dvh（dynamic viewport height），支持 Chrome 109+、Safari 16.4+，但旧版本需降级
稳妥做法：用 JS 动态设置 style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，CSS 中用 height: calc(var(--vh, 1vh) * 100)
别指望一次写死的 CSS 能完美适配所有设备——满屏布局的“简单”只存在于开发初期，真进线上就得测 iOS、Android、折叠屏、横竖屏切换