Как избавиться от горизонтальных «скачков»

Многие в своей практике используют метод центрирования по горизонтали, используя левый и правый отступы (margin) со значением auto:

#page-wrap {
    margin: 0 auto;
}

Одним из недостатков этого метода являются небольшие «скачки» содержимого при переходе со страницы, где нет вертикальной полосы прокрутки на страницу, где она есть и наоборот. Это происходит из-за 16-ти пиксельной ширины этой самой полосы.
Избавится от этой проблемы можно, зафиксировав полосу прокрутки вне зависимости от содержимого.

Это можно сделать, добавив это правило:

html {
height: 101%;
}

Это работает в IE6, 7, Firefox и Opera. Но выглядит это очень…

Лучшим решением на мой взгляд является добавление следующего:

html {
overflow: scroll;
}

Можно оставить только вертикальную полосу прокрутки, используя это:

html {
overflow-y: scroll;
}

Но у меня в Опере это не сработало.

Источник: Eliminate “Jumps” in Horizontal Centering By Forcing a Scroll Bar

Если знаете метод лучше, отпишитесь :)

Обсуждение:

  1. Serhiy

    А зачем это вобще фиксить? Ведь когда что фиксиш оно может вылезти в другом месте. По-мему оно и так неплохо выглядит.
    Подписатся на коментарии можно както?

  2. Alex

    Фиксить это не обязательно, но немного напрягает.

    Для подписки внизу ссылка есть.

  3. Zigzag

    Лично меня это никогда не напрягало =). overflow-x/y это фишка эксплорера, которая, впрочем, будет в CSS#. Мое мнение, такие вещи фиксить не нужно.

  4. Морозов

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*