存在滚动条时绝对 div 移动答案

【问题标题】：Absolute div shifts when scrollbar is present存在滚动条时绝对 div 移动
【发布时间】：2011-03-29 03:50:13
【问题描述】：

我对页面的全部内容有疑问。
没有滚动条的问题是我的内容向右大约 20px，但是当滚动条出现时，它会向左移动。我必须通过将其定位在内容上方 20 像素来补偿绝对定位 div，直到出现滚动条，因为它位于页面的右侧。

这对我来说是一个糟糕的错误，但我只是想要一个简单的方法来解决这个问题。有什么快速简单的建议吗？将主要内容 div 设为绝对 div 会更好吗？

【问题讨论】：

标签： css html absolute

【解决方案1】：

一种快速而肮脏的方法是始终强制滚动条可见：

html { overflow-y: scroll; }

不理想，但如果缺少滚动条偏移会破坏您的设计，它会标准化外观。

【讨论】：

它可能很脏，但正是我想要的！

【解决方案2】：

如果我正确理解了您的问题，当存在滚动条时，您的绝对 div 会相差 20px？如果是这种情况，您可以设置一个包含您的内容和绝对 div 的父 div。

请务必将此包装 div 设置为 position: relative;所以现在您的绝对 div 将位于相对 div 内部，而不是文档级别。如果有滚动条，包装div会向左偏移20px（滚动条的宽度），绝对div也会。

<div class="wrapper">
  your content goes here
  <div class="absoluteDiv"></div>
</div>

.wrapper { position: relative; }
.absoluteDiv { position: absolute; }

【讨论】：

【解决方案3】：

我认为您的内容实际上并没有以任何错误的方式发生变化；只是滚动条的存在使视口变窄。如果您使用的布局取决于视口宽度（例如流体布局，或内容居中的固定宽度），这将导致所有内容在滚动条出现时移动一半宽度。

AFAIK，没有万无一失的方法来弥补这一点，因为滚动条的宽度是未知的。

【讨论】：

我想知道，有没有办法用 JavaScript 获取滚动条的宽度？然后编写一些 JavaScript 来调整 CSS 以在有和没有滚动条的情况下保持相同的外观。