vw单位陷阱：body溢出导致页面宽度异常解析

文章不知道大家是否熟悉？今天我将给大家介绍《vw 单位陷阱：body 溢出导致 html 宽度异常解析》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

当 `body` 内容垂直溢出导致滚动条出现时，如果页面元素使用了 `100vw` 作为宽度或边框宽度，`html` 元素可能会出现意外的水平宽度扩张。这通常是由于 `vw` 单位在计算时包含了滚动条的宽度。本文将深入探讨 `vw` 单位的这一特性，并提供避免此问题以及实现斜角设计的现代CSS解决方案。

vw 单位与滚动条：问题的根源

在网页布局中，我们经常使用 vw (viewport width) 和 vh (viewport height) 单位来创建响应式设计。1vw 等于视口宽度的百分之一。然而，一个常见的误解是 100vw 总是等于可见的浏览器内容区域宽度。实际上，当页面内容垂直溢出，导致浏览器显示垂直滚动条时，100vw 会包含这个滚动条的宽度。

考虑以下场景，一个 div 元素被用来创建对角线效果，通过设置其右边框宽度为 100vw：

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

html {
  background-color: green; /* 用于观察html元素的背景 */
}

body {
  background-color: red; /* 用于观察body元素的背景 */
}

body .diagonal {
  border-top: 10vw solid blue;
  border-right: 100vw solid purple; /* 问题所在：border-right宽度设置为100vw */
}

    SECTION 1 
    

    Why does the html enlarge the width on the right when the body overflows the bottom of the page? Thanks
    
text
    
text
    
Try by adding some text line and scrool left
    
text
    
text
    
text
    
text
    
text
    
text
    
text

当 body 中的文本行足够多，导致页面出现垂直滚动条时，你会发现 html 元素的背景色（绿色）在页面的右侧额外扩张了一部分。这是因为 .diagonal 元素的 border-right: 100vw 属性，在计算时包含了垂直滚动条的宽度。例如，如果滚动条宽度为 17px，那么 100vw 实际上会比可见内容区域宽 17px，从而导致 html 元素被撑开，进而产生水平滚动条或右侧空白区域。

理解 vw 的精确行为

根据 CSS 规范，vw 单位是相对于初始包含块的宽度。在大多数浏览器中，这个初始包含块的宽度在有垂直滚动条时会包含滚动条的宽度。这意味着 100vw 实际上是浏览器窗口的完整宽度，包括任何可能出现的垂直滚动条。

这种行为对于需要精确匹配可见视口宽度的布局来说是一个陷阱。如果一个元素被设置为 width: 100vw 或其边框宽度为 100vw，并且页面同时出现了垂直滚动条，那么这个元素就会比你预期地更宽，从而导致水平滚动条的出现或父元素（如 html）的意外扩张。

解决方案与最佳实践

为了解决 100vw 带来的宽度扩张问题，并实现美观的斜角设计，我们可以采取以下策略。

1. 避免 100vw 导致的溢出

如果你的目标是让元素宽度或边框宽度与页面的 可见内容区域 宽度一致，并且不希望它包含滚动条，那么直接使用 100vw 是不合适的。

• 使用 width: 100%： 对于大多数情况，如果一个元素需要与其父容器的宽度一致，width: 100% 是更安全的选择。它会相对于其最近的块级父元素进行计算，并且通常不会包含滚动条的宽度（除非父元素本身被 vw 单位撑开）。
• 使用 calc() 函数： 如果你确实需要基于视口宽度进行计算，并且知道滚动条的固定宽度（例如，在某些操作系统和浏览器中滚动条宽度是固定的），你可以尝试使用 calc(100vw - )。但这通常不推荐，因为滚动条宽度因系统、浏览器和用户设置而异，难以精确计算。

对于本例中的斜角边框，如果坚持使用边框实现，并且希望它与 body 的宽度对齐，可以尝试将 .diagonal 元素的 width 设置为 100%，然后调整边框宽度。但这种方法对于创建复杂的斜角效果仍然有限，且可能不是最直观的实现方式。

/* 修正示例：如果目标是让元素宽度与父元素body对齐 */
body .diagonal {
  /* 移除 border-right: 100vw; */
  width: 100%; /* 让div占据body的全部宽度 */
  border-top: 10vw solid blue;
  /* 如果只是想让它视觉上覆盖到右侧，需要更复杂的布局或使用其他技术。
     对于斜角，通常不会用100vw的border-right。
     此处如果仍设置border-right，其宽度会相对div自身宽度计算。
     若要实现斜角，应考虑以下现代方法。
  */
}

2. 创建斜角设计的现代方法

使用边框来创建复杂的斜角效果通常不是最佳实践，因为它在响应式和维护方面存在局限性。现代 CSS 提供了更强大和灵活的工具来实现此类设计。

a. 使用 clip-path

clip-path 属性允许你定义一个可见区域，超出该区域的内容将被裁剪。这对于创建各种多边形和不规则形状非常有用。

.diagonal-clip-path {
  width: 100%;
  height: 150px; /* 设定一个高度 */
  background-color: blue;
  /* 使用 clip-path 创建一个斜角 */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%); /* 顶部左侧，顶部右侧，底部右侧（20%向上），底部左侧 */
}

b. 使用 transform: skew()

通过 transform 属性的 skew() 函数，你可以倾斜一个元素，从而创建斜角效果。通常需要结合伪元素或额外的 div 来实现。

.diagonal-skew {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden; /* 隐藏倾斜后超出边界的部分 */
  background-color: transparent; /* 父元素透明 */
}

.diagonal-skew::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%; /* 调整位置以覆盖整个宽度，可能需要根据倾斜角度调整 */
  width: 200%; /* 确保倾斜后能覆盖整个父元素宽度 */
  height: 100%;
  background-color: purple; /* 斜角的颜色 */
  transform: skewY(-5deg); /* 沿Y轴倾斜，创建斜角 */
  transform-origin: top left; /* 倾斜的基点 */
}

c. 使用 linear-gradient 作为背景

linear-gradient 可以创建线性渐变，通过巧妙地设置颜色停止点，可以模拟出硬边斜角。

.diagonal-gradient {
  width: 100%;
  height: 150px;
  /* 使用渐变创建斜角，例如一个从左下到右上的斜线 */
  background: linear-gradient(to top right, transparent 50%, purple 50%);
  /* 或者更复杂的斜角，根据需求调整角度和颜色停止点 */
  /* background: linear-gradient(150deg, blue 50%, purple 50%); */
}

注意事项

• vw 单位的适用场景： vw 单位非常适合用于需要与视口尺寸直接相关的元素，例如全屏背景图片、字体大小（

到这里，我们也就讲完了《vw单位陷阱：body溢出导致页面宽度异常解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！