使用100vh设置每屏高度，配合overflow控制滚动，可实现无需JavaScript的全屏滑动布局，适用于宣传页等场景；通过scroll-behavior平滑滚动，scroll-snap增强停靠效果，并注意box-sizing、图片占位及移动端dvh兼容性优化体验。
要实现CSS单页布局中的全屏滑动效果，核心是利用
单位定义每一页的高度为100%视口高度，并通过
属性控制整体或局部的滚动行为。这种方式无需JavaScript即可完成基础的全屏分页滚动布局，适用于介绍页、作品集或宣传页。
使用vh单位设置全屏高度
视口高度单位
表示视口高度的百分比，1vh等于视口高度的1%。因此，将每个内容区块的高度设为
，就能让其占据整个屏幕高度。
示例结构如下：
CSS样式设置：
立即学习
“
前端免费学习笔记（深入）
”；
.slide {height: 100vh;display: flex;align-items: center;justify-content: center;font-size: 2rem;}
这样每个
都会正好填满
浏览器
可视区域，垂直方向自然堆叠。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
控制页面滚动：overflow与body设置
为了让用户能上下滑动浏览不同“屏”，需要确保页面主体允许滚动。通常保持默认的
即可，但需注意避免意外隐藏滚动条。
关键点：
父容器（如
或
）不要设置
，否则会禁用全局滚动
若想实现平滑滚动，可添加：
移除默认边距，防止额外空白：
优化视觉连续性与防抖动
有时因字体加载或图片
异步加载
导致页面高度变化，可能引发跳动。可通过以下方式提升体验：
统一设置
避免盒模型计算偏差
为图片设定固定高度或使用占位符
在移动端注意Safari对
的解析问题，可改用JS动态计算或
（动态视口单位）作为补充
使用
增强滑动停靠感（可选增强）：
.container {height: 100vh;overflow-y: scroll;scroll-snap-type: y mandatory;}.slide {scroll-snap-align: start;}
基本上就这些。通过
设定单屏高度，配合合理的
控制，就能实现简洁高效的全屏滑动布局。不复杂但容易忽略细节，比如重置默认样式和处理移动端兼容性。
vhoverflowvh100vh.slideoverflow: visiblebodyhtmloverflow: hiddenhtml { scroll-behavior: smooth; }body { margin: 0; padding: 0; }box-sizing: border-box100vhdvhscroll-snap100vhoverflow