当滚动条存在时，绝对div会移动

Question

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

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

Answer 1

如果我正确理解你的问题，当滚动条存在时你的绝对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; }

Answer 2

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

html { overflow-y: scroll; }

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

Answer 3

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

AFAIK，由于滚动条的宽度未知，因此没有可靠的方法来弥补这一点。