在去做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>
