使用CSS设置控件宽度和高度为100%，并确保其父元素具有明确尺寸，利用绝对定位或Flexbox、Grid布局也可实现占满效果，注意处理边距和边框的影响。
在HTML5中让控件（如<div>、图片、视频或表单元素）占满容器或视口，需结合CSS布局技术,以下是具体实现方法及代码示例：
占满父容器
核心思路：使用width: 100%和height: 100%,并确保父容器有明确尺寸。
<div class="parent"> <div class="child">占满父容器</div> </div>
.parent {
width: 500px;
height: 300px;
border: 1px solid #333;
}
.child {
width: 100%; /* 宽度占满 */
height: 100%; /* 高度占满 */
background: #f0f;
}
占满整个视口（全屏）
方法1：使用视口单位vw/vh
.fullscreen {
width: 100vw; /* 视口宽度的100% */
height: 100vh; /* 视口高度的100% */
background: #09f;
}
方法2：绝对定位
.fullscreen-abs {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; /* 四边拉伸至视口边缘 */
background: #f90;
}
特定控件占满示例
-
图片占满容器
img { width: 100%; height: 100%; object-fit: cover; /* 防止变形（裁剪多余部分） */ } -
视频背景全屏
<video class="fullscreen-video" autoplay muted loop> <source src="video.mp4" type="video/mp4"> </video>
.fullscreen-video { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: -1; } -
表单输入框占满
input { width: 100%; box-sizing: border-box; /* 包含padding和border */ padding: 12px; }
关键注意事项
-
盒模型问题
添加box-sizing: border-box避免padding/border导致溢出：* { box-sizing: border-box; /* 全局推荐 */ } -
层级关系
若父容器无明确高度，子元素设置height: 100%无效,解决方案：
- 为父链元素设置
height: 100%（向上追溯至<html>） - 使用Flexbox/Grid布局
- 为父链元素设置
-
Flexbox布局占满
.flex-parent { display: flex; height: 100vh; } .flex-child { flex: 1; /* 自动填充剩余空间 */ } -
Grid布局占满
.grid-parent { display: grid; height: 100vh; } .grid-child { grid-area: 1 / 1 / 2 / 2; /* 覆盖整个网格区域 */ }
常见问题解决
- 滚动条导致溢出：
添加overflow: hidden到父容器。 - 默认边距干扰：
重置body { margin: 0 }。 - 移动端适配：
在<head>添加视口标签：<meta name="viewport" content="width=device-width, initial-scale=1">
引用说明参考MDN Web文档关于视口单位、CSS盒模型及Flexbox布局的权威指南，代码示例经主流浏览器（Chrome/Firefox/Safari/Edge）验证。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/38692.html
