带有滚动条的 CSS 定位

Question

我的显示器是 1440 像素宽，但滚动条带走了像素，而 body 标签的宽度小于 1440 像素。 并且当滚动条消失（侧边栏出现）时，窗口宽度返回 1440 像素。 如何使显示始终全宽？

带有滚动条的普通视图

没有滚动条和菜单侧边栏的视图

Answer 1

我认为您正在寻找vw ( Viewport W idth ) 和vh ( Viewport H八) 单位。 在您的示例中， 100vw将替换为1440px 。

但是，它们可能会导致滚动条出现溢出。 见： https ://jsfiddle.net/ny0vskru/

一个简单的解决方案是给父position: relative因此您可以使用100%来使元素适合屏幕宽度和高度。

注意： div元素默认有 100% 的宽度。