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

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

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

Источник

3 ответа

Решение

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

html { overflow-y: scroll; }

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

Источник

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

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

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

.wrapper { position: relative; }
.absoluteDiv { position: absolute; }
Источник

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

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

Источник
Другие вопросы по тегам