Absolute div shifts when scrollbar is present

问题

i have a problem with the entire content of my page.
The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts to the left. I have to compensate for this for an absolute postioned div by positioning it over the content by 20px until a scrollbar is present as it rests at the right hand side of the page.

This is a crappy fault on my behalf but i just want an easy way to fix this. Any quick and easy suggestions? Would i be better off making the main content div an absolute one?

回答1:

One quick and dirty way is to always force the scrollbar to be visible with:

html { overflow-y: scroll; }

Not ideal, but it standardizes the appearance if the lack of scrollbar offset is breaking your design.

回答2:

If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.

Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.

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

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

回答3:

I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.

AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.

来源：https://stackoverflow.com/questions/5463200/absolute-div-shifts-when-scrollbar-is-present