为什么滚动条影响 fixed/absolute 元素的宽度而不是 static/relative

Question

我们注意到在使用滚动条 "show automatically"-feature 与 "always visible" 时，所有浏览器在 OSX' 下都有一个奇怪的行为（参见 OSX 设置->常规） .

如果切换到 "always"，fixed/absolute 元素的 100% 宽度比切换到 "automatically" 时少 15px。

我基本上可以理解 "always" 滚动条使用固定的 space 而 "automatic" 滚动条是某种覆盖在内容上的。

但为什么这对

如此重要

position:fixed/absolute

个元素，但不

position:static/relative?

我做了一个 fiddle 来演示这个问题，但是，您必须切换系统设置才能注意到它： https://jsfiddle.net/n4jtpwvw/

期望的最终结果：蓝色 (#navigation) 和红色 (#main) DIV 应该完美对齐，无论滚动条上的客户端设置如何。

Answer 1

位置为fixed/absolute的元素通常从正常文档流中取出。关于幕后发生的事情，有一个很好的答案here。

至于你的代码，看看这个更新的 jsfiddle，在打开和关闭 OSX 选项时对我有用

.w1 {
  ...
  max-width: 300px;
  margin: 0 auto;
}

#navigationWrapper {
  ...
  max-width: inherit;
}

我在 .w1 上设置了最大宽度和自动边距。然后我从#navigationWrapper 中取出左右属性，让它从 .w1

继承 max-width

Why does the scrollbar influence width of fixed/absolute elements but not static/relative