Абсолютные сдвиги div при наличии полосы прокрутки

Question

У меня проблема со всем содержимым моей страницы.
Проблема в том, что без наличия полосы прокрутки мой контент составляет около 20 пикселей вправо, но когда полоса прокрутки присутствует, она смещается влево. Я должен компенсировать это за абсолютное позиционирование div, расположив его над содержимым на 20 пикселей, пока не появится полоса прокрутки, так как она лежит в правой части страницы.

Это дерьмовый сбой с моей стороны, но я просто хочу, чтобы это было легко исправить. Какие-нибудь быстрые и простые предложения? Будет ли лучше сделать основной контент абсолютным?

Answer 1

Один быстрый и грязный способ - всегда заставлять полосу прокрутки быть видимой с помощью:

html { overflow-y: scroll; }

Не идеально, но это стандартизирует внешний вид, если отсутствует смещение полосы прокруткиваш дизайн.

Answer 2

Если я правильно понимаю вашу проблему, ваш абсолютный div отключен на 20px при наличии полосы прокрутки?В этом случае вы можете установить родительский div, который обернет ваш контент и абсолютный div.

Обязательно установите для этого div-обёртки значение position :lative;так что теперь ваш абсолютный div будет располагаться внутри относительного div вместо уровня документа.Если есть полоса прокрутки, div оболочки будет смещен влево на 20 пикселей (ширина полосы прокрутки), а абсолютный div также будет.

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

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

Answer 3

Я не думаю, что ваш контент действительно сдвигается каким-либо ошибочным образом; просто наличие полосы прокрутки сужает область просмотра. Если вы используете макет, который зависит от ширины области просмотра (например, макет с текучей средой или фиксированная ширина с центрированным содержимым), это приведет к тому, что все будет перемещаться на половину ширины полосы прокрутки, когда она появится.

AFAIK, нет надежного способа компенсировать это, поскольку ширина полосы прокрутки неизвестна.