满屏显示是网页布局中最常见的需求之一，无论是全屏轮播图、登录页背景，还是视频播放器、可视化大屏，都离不开让元素铺满整个浏览器窗口。不过不少人在实现时会遇到各种问题：明明设置了宽度100%却出现横向滚动条，高度100%不生效，或者底部总有一条白边。这篇文章就来系统梳理几种主流的满屏实现方案，分析它们的原理和适用场景。
一、使用width和height百分比实现满屏
最直观的思路是给元素设置width: 100%和height: 100%。但很多人第一次这么写会发现高度并不生效，元素仍然只有内容那么高。原因在于百分比高度是相对于父元素计算的，如果父元素（body、html）没有明确的高度，子元素的100%就无从谈起。
正确的做法是从html标签开始逐级声明高度，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>百分比满屏示例</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.fullscreen {
width: 100%;
height: 100%;
background: #2b6cb0;
}
</style>
</head>
<body>
<div class="fullscreen">我是满屏元素</div>
</body>
</html>这里有两个细节需要注意。第一，浏览器默认给body加了8px的margin，如果不重置为0，就算高度设置正确，页面四周也会出现白边，高度上还会多出16px导致出现纵向滚动条。第二，这种写法要求从html到目标元素的层级链上每一层都有明确高度，层级一深就容易漏掉某一层，维护起来比较麻烦。
百分比方案的优点是兼容性极好，连很老版本的浏览器都支持；缺点是依赖父级链路，结构复杂的页面容易出现高度断链的问题。所以在实际项目中，更推荐下面介绍的视口单位方案。
二、使用vw和vh视口单位实现满屏
CSS3引入了视口单位vw和vh，1vw等于视口宽度的百分之一，1vh等于视口高度的百分之一。因此100vw和100vh就分别代表整个视口的宽度和高度，完全不受父元素影响，用起来省心很多。
.fullscreen {
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #667eea, #764ba2);
}只需要在目标元素上直接声明，不需要给html和body设置任何东西，这是它相比百分比方案最大的优势。写一个完整的示例：
<style>
body {
margin: 0;
}
.hero {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 32px;
}
</style>
<body>
<section class="hero">整屏Hero区域</section>
<body>视口单位也有一个经典坑点：在Windows系统上，滚动条会占据约17px的宽度。如果页面本身因为其他内容出现了纵向滚动条，100vw会包含滚动条的宽度，导致出现横向滚动条。解决办法是宽度仍然用width: 100%，只把高度换成100vh，这样既避开了滚动条问题，又保留了视口单位不受父级限制的优点。
另外在移动端要注意，手机浏览器的地址栏会动态收起和展开，100vh在部分安卓浏览器上指的是地址栏展开时的高度，可能造成底部内容被遮挡。针对这种情况，可以使用较新的dvh单位（动态视口高度），它会在地址栏变化时自动调整，不过需要确认目标浏览器的支持情况。
三、使用position fixed定位实现满屏
第三种常见方案是利用固定定位，让元素脱离文档流并相对浏览器窗口定位：
.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1a202c;
z-index: 9999;
}这种写法常见于全屏遮罩层、加载动画和弹窗背景。因为固定定位是相对视口计算的，所以宽高百分比在这里直接就是整个窗口的大小，不需要父元素配合。同时元素脱离了文档流，不会撑出滚动条。
它的局限也很明显：固定定位的元素不占文档流位置，页面其他内容会在它下面正常排布，如果用来做普通布局容器，滚动页面时内容会一直钉在屏幕上，通常这不是想要的效果。所以fixed方案更适合做覆盖层，而不是常规的满屏布局。
四、使用Full Screen API实现浏览器原生全屏
前面几种方法实现的是铺满浏览器窗口区域，如果想更进一步，让页面脱离浏览器地址栏和标签栏，像视频网站那样进入真正的全屏模式，就需要借助JavaScript的Full Screen API。
// 让指定元素进入全屏
function requestFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); // 兼容Safari
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); // 兼容旧版Firefox
}
}
// 退出全屏
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// 使用示例：点击按钮让整个页面全屏
document.getElementById('btn').addEventListener('click', function () {
requestFullScreen(document.documentElement);
});调用requestFullscreen的对象可以是一个具体元素，也可以是document.documentElement表示整个页面。需要注意浏览器出于安全考虑，全屏请求必须由用户操作触发，比如点击事件，直接在页面加载时调用是无效的。
全屏状态下还可以通过::backdrop伪元素设置全屏元素的背景色，也可以监听fullscreenchange事件来感知用户进入或退出全屏，从而调整页面UI，比如在全屏播放视频时显示自定义控制栏。
五、方案对比与选型建议
为了方便选择，把几种方案的特性整理成表格：
| 方案 | 是否受父级影响 | 适用场景 | 主要问题 |
|---|---|---|---|
| 百分比100% | 是，需逐级设置高度 | 传统布局、老项目 | 高度断链、body默认margin |
| 100vw / 100vh | 否 | 现代项目首选 | 滚动条占位、移动端地址栏 |
| position fixed | 否 | 遮罩层、弹窗、加载页 | 脱离文档流，不适合常规布局 |
| Full Screen API | 否 | 视频播放、演示文稿 | 需用户触发，需处理兼容前缀 |
实际开发中的推荐组合是：宽度用width: 100%，高度用height: 100vh，再配合box-sizing: border-box避免内边距把元素撑出屏幕。如果需要做可视化大屏这类固定不滚动的页面，还可以在body上加上overflow: hidden彻底杜绝滚动条。
最后补充一个容易忽略的点：无论采用哪种方案，都建议在CSS开头做一次样式重置，把html和body的margin、padding清零。很多看起来莫名其妙的白边和滚动条，根源都是浏览器默认样式在捣乱。养成良好的重置习惯，满屏效果才能真正干净利落。