width设置100vh但出现横向滚动条的问题

在去做flex左右固定,中间自适应宽度的布局时, 发现这样一个问题:

就是我明明是宽度占据整个视口, 但是却多出了横向的滚动条

效果是这样的

在这里插入图片描述

把width改成100%,就没有滚动条了

原因:

body是有默认样式的, 会有一定的默认边距, 把默认边距清除就是正常的了

同时, 如果把高度设置超过100vh, width: 100vw 时，元素的宽度会占据整个视口的宽度，包括滚动条的宽度

这时,滚动条会占据一定的宽度，这会导致元素的实际宽度超过视口的可见宽度，从而出现横向滚动条。

为什么设置为width: 100%时就不会有滚动条:

width: 100% 表示元素的宽度是其父元素宽度的 100%。具体来说：

父元素宽度：父元素的宽度是视口的宽度减去滚动条的宽度（如果有滚动条）。

子元素宽度：子元素的宽度会根据父元素的宽度进行计算，不会超过父元素的宽度。

因此，即使视口有滚动条，width: 100% 的元素宽度也不会超过视口的可见宽度，所以不会出现横向滚动条。

解决方法:

在width中减去滚动条的宽度就可以了, 一般是17px, calc(100vw - 17px)

或者使用width: 100%

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/*去除页面默认边距html body{padding: 0;margin: 0;}*/.wrap {display: flex;//如果高度大于100vh需要将width:100vw的部分减去滚动条宽度height: 100vh;width: 100vw;overflow: hidden;}.left {width: 200px;background-color: yellow;}.middle {flex: 1;background-color: green;}.right {width: 200px;background-color: red;}</style></head><body><div class="wrap"><div class="left"></div><div class="middle"></div><div class="right"></div></div></body>
</html>