当存在滚动条时绝对 div 发生变化

Question

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

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

Answer 1

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

html { Overflow-y:scroll; }

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

Answer 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; }

Answer 3

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

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