css - 存在滚动条时绝对 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，没有万无一失的方法来弥补这一点，因为滚动条的宽度是未知的。