在css中设置元素宽度为100vw是非常常见的布局需求，100vw代表视口宽度的100%，也就是当前浏览器可视区域的完整宽度。要实现这个效果，只需要给目标元素设置width属性为100vw即可。
基础设置方法
设置元素宽度为100vw的核心代码非常简单，直接在css样式中声明width属性即可，以下是基础的示例代码：
/* 给类名为full-width的元素设置宽度为100vw */
.full-width {
width: 100vw;
/* 可选：清除默认的外边距，避免元素出现额外偏移 */
margin: 0;
padding: 0;
}
如果是行内元素，需要先将其转为块级元素或者行内块元素，才能生效width属性，示例如下：
/* 行内元素设置100vw需要先转换显示类型 */
span.full-width {
display: block; /* 转为块级元素，也可以设置为inline-block */
width: 100vw;
}
100vw和100%宽度的区别
很多开发者会混淆100vw和100%宽度的概念，两者的实际表现存在明显差异：
- 100vw：宽度等于当前视口的100%，不会受到父元素宽度的影响，即使父元素有固定宽度或者内边距、边框，元素依然会占满整个视口宽度。
- 100%宽度：宽度等于父元素的100%，如果父元素有内边距、边框或者固定宽度，子元素的100%宽度会基于父元素的可用内容宽度计算。
可以通过以下示例直观对比两者的差异：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
width: 800px;
padding: 20px;
border: 1px solid #ccc;
}
.child-vw {
width: 100vw;
height: 50px;
background: #f0f0f0;
}
.child-percent {
width: 100%;
height: 50px;
background: #e0e0e0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child-vw">宽度100vw的元素</div>
<div class="child-percent">宽度100%的元素</div>
</div>
</body>
</html>
常见问题及解决方案
滚动条溢出问题
在部分浏览器中，设置width:100vw可能会导致横向滚动条出现，这是因为100vw包含了浏览器滚动条的宽度，而元素默认的box-sizing是content-box，加上可能存在的body默认外边距，就会导致总宽度超过视口可用宽度。
解决方案有两种，第一种是重置body的默认外边距：
/* 清除body默认的外边距 */
body {
margin: 0;
}
.full-width {
width: 100vw;
}
第二种是修改box-sizing为border-box，让内边距和边框计入宽度计算：
.full-width {
width: 100vw;
box-sizing: border-box;
/* 如果元素有内边距，也会被包含在100vw宽度内 */
padding: 10px;
}
移动端适配注意事项
在移动端开发中，100vw会基于当前视口的宽度计算，包括移动端的滚动条（部分移动端浏览器滚动条不占宽度），通常表现符合预期，但如果页面存在固定定位的侧边栏等元素，需要额外计算可用宽度，避免元素被遮挡。
适用场景
100vw宽度的设置适合以下场景：
- 全屏背景模块，需要占满整个浏览器可视宽度。
- 横向通栏导航、横幅广告等需要突破父容器限制的元素。
- 需要基于视口宽度做响应式布局，不依赖父容器宽度的场景。