CSS布局：解决元素宽度和高度设置为100%时未占据全部空间的问题
在使用CSS进行页面布局时，很多开发者会将元素的宽度和高度设置为100%，期望元素能占满父容器的全部空间，但实际效果往往不符合预期，元素只占据了部分空间。本文将分析这类问题的常见原因，并提供对应的解决方案。
问题场景说明
假设我们期望页面中的内容容器占满整个浏览器视口，编写了如下基础代码：
html, body {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100%;
background-color: #f0f0f0;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>布局测试</title> <link rel="stylesheet" href="https://www.ipipp.com/style.css"> </head> <body> <div class="content">内容区域</div> </body> </html>
此时如果页面没有出现预期的满屏效果，通常是由以下几类原因导致的。
常见原因及解决方案
1. 父容器未设置明确的宽高
CSS中百分比单位的宽高计算，是相对于父容器的对应尺寸而言的。如果父容器本身没有设置明确的宽度或高度，子元素设置100%就无法获取到有效的参考值，自然无法占满空间。
以高度为例，<html>标签的父容器是浏览器视口，若没有给<html>和<body>设置高度，那么.content设置height:100%时，父容器高度为0，子元素高度也会是0。
解决方案就是给所有祖先容器都设置对应的百分比宽高，直到参考到有明确尺寸的容器，比如上述示例中的html, body { width: 100%; height: 100%; }就是给根容器和body设置了尺寸，让子元素的100%有明确的参考。
2. 元素存在默认内外边距
很多浏览器会为<body>、<h1>、<p>等标签设置默认的margin或padding，如果元素设置了width:100%，再加上默认的左右margin或padding，总宽度会超过父容器宽度，可能出现滚动条或者元素被挤到下一行，看起来没有占满空间。
解决方案是使用CSS重置，清除元素的默认内外边距：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}其中box-sizing: border-box可以让元素的width和height包含padding和border，避免设置内边距后元素尺寸超出父容器。
3. 元素使用了浮动或定位属性
如果元素设置了浮动（float: left/right），或者绝对定位（position: absolute）、固定定位（position: fixed），元素的布局方式会发生变化，此时直接设置width:100%可能无法达到预期效果。
对于浮动元素：浮动元素会脱离文档流，宽度默认由内容撑开，设置100%时需要确保其父容器没有受到其他浮动元素的影响，必要时可以清除浮动，或者给父容器设置
overflow: hidden触发BFC（块级格式化上下文）来包含浮动元素。对于绝对定位元素：绝对定位元素的百分比宽高是相对于最近的已定位（非static）祖先元素计算的，如果祖先元素没有设置定位，会一直向上找到
<html>标签。如果希望绝对定位元素占满整个视口，可以直接设置position: absolute; top:0; left:0; right:0; bottom:0;，不需要设置宽高百分比，效果等同于占满整个参考容器。
4. 盒模型计算不符合预期
默认情况下，CSS的盒模型是content-box，即元素的width和height只包含内容区域，不包含padding和border。如果给元素设置了padding或者border，再设置width:100%，元素的总宽度会是100%加上padding和border的宽度，超过父容器宽度。
除了上述重置样式中的box-sizing: border-box方案，也可以调整计算方式，比如如果父容器宽度是500px，希望元素内容宽度占满，同时有10px的padding，那么可以设置width: calc(100% - 20px); padding: 0 10px;，通过calc函数动态计算宽度。
替代方案：使用视口单位
如果不需要参考父容器尺寸，而是希望元素直接占满整个浏览器视口，可以使用视口单位vw（视口宽度的百分比，1vw等于视口宽度的1%）和vh（视口高度的百分比，1vh等于视口高度的1%），不需要依赖父容器的宽高设置：
.content {
width: 100vw;
height: 100vh;
background-color: #f0f0f0;
}这种方式直接以视口为参考，避免了父容器尺寸未定义导致的问题，不过需要注意100vw可能会包含滚动条的宽度，部分场景下可以结合max-width: 100%来避免溢出。
总结
元素设置100%宽高未占满空间的核心原因，大多是百分比参考的父容器尺寸不明确、默认样式干扰、盒模型计算不符合预期或者布局属性改变了元素的尺寸计算规则。开发中可以先检查元素的祖先容器尺寸设置，清除默认样式，确认盒模型和定位属性，必要时可以使用视口单位替代百分比方案，快速实现满屏布局效果。