实现CSS全屏布局需用100vh/100vw、绝对/固定定位或Flex/Grid结合min-height:100vh，注意移动端vh跳变、父容器定位上下文及滚动控制。
要实现 CSS 全屏布局，核心是让容器占据整个视口（viewport）区域，同时确保内容不溢出、不滚动（除非主动设置），并适配不同设备。关键不在于“多炫酷”，而在于准确控制尺寸、定位和层级关系。
使用 viewport 单位实现真全屏容器
最直接的方式是用 100vh（视口高度）和 100vw（视口宽度）：
-
推荐写法：
height: 100vh; width: 100vw;—— 精确匹配当前屏幕可视区域 - 注意：
100vh在移动端 Safari 中可能因地址栏显隐导致高度跳变，可配合min-height: 100vh或 JS 动态修正 - 避免用
height: 100%，它依赖父元素高度，若祖先未设高，会失效
绝对定位 + top/left/right/bottom 实现全屏覆盖
适用于模态框、遮罩层、全屏背景等需要脱离文档流的场景：
-
标准写法：
position: absolute; top: 0; left: 0; right: 0; bottom: 0; - 必须确保其父容器有
position: relative或其它非static定位，否则会相对于视口定位 - 若需固定在视口不随滚动移动，改用
position: fixed，效果相同但脱离滚动上下文
Flex/Grid 布局驱动的全屏结构
现代布局方案中，用 Flex 或 Grid 更利于内容居中与响应式控制：
立即学习“前端免费学习笔记（深入）”；
-
Flex 全屏容器：
display: flex; min-height: 100vh;，再用justify-content和align-items居中子元素 -
Grid 全屏容器：
display: grid; min-height: 100vh;，搭配place-items: center快速居中 - 推荐用
min-height: 100vh而非height，防止内容超长时被截断
处理滚动与内容溢出的细节
全屏 ≠ 禁止滚动，需按需控制：
- 如需强制无滚动：
overflow: hidden加在全屏容器上（慎用，影响可访问性） - 如内容可能超长，保留自然滚动：
overflow-y: auto，并确保内边距（padding）合理，避免内容贴边 - 移动端注意：iOS Safari 对
vh的兼容性，可用env(safe-area-inset-bottom)配合处理刘海屏底部留白
