Scrollbar сдвигает содержимое

У меня: У меня есть несколько веб-страниц с этим контуром:

<body>
<div id="container">
CONTENT
</div>
</body>

с CSS:

body{
color:#000000;
background-color:#FFFFFF;
background-image: url(background.jpg);
background-repeat: repeat-x;
font-family: verdana;
letter-spacing: 1px;
}
#container{
margin-left:auto;
margin-right:auto;
margin-top:5px;
width: 700px;
}

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

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

Вопрос: Есть ли способ избежать перемещения контейнера при его центрировании без появления полосы прокрутки на всех страницах?

Ответы

Ответ 1

Я не знаю о чистом решении CSS, но вы можете использовать javascript для динамического подсчета и настройки правильной ширины левого поля (при том, что правый край немного тоньше - по размеру полосы прокрутки).

BTW: IMO: Правильный способ справиться с этим: Оставить его как есть.. Это поведение по умолчанию, и я не думаю, что пользователи беспокоятся об этом так же, как и ты. Это мое мнение, и у кого-то может быть другое, но добавление полосы прокрутки на каждую страницу (для решения этой проблемы) - это эпический провал.:)

Ответ 2

Люди с большими мониторами никогда не будут видеть полосу прокрутки на любой странице.

Люди с маленькими мониторами всегда будут видеть полосы прокрутки на всех страницах.

Несмотря на размер монитора, люди могут сделать любое окно браузера любым размером и вызывать полосы прокрутки.

О, и давайте не забывать о людях, которые хотели бы добавить дюжину дополнений панели инструментов браузера, делая область содержимого окна браузера вдвое меньшей, чем могла бы быть.

Это так, как есть, и никакое статическое решение не обойдет это. Изменение поля на одной странице не является решением по причинам, перечисленным выше.

Если вы настаиваете на фиксации чего-то, чему научились люди, это должно быть "динамическое" решение для JavaScript, в котором вы вычисляете левое поле и добавляете ширину полосы прокрутки. Для разных браузеров полосы имеют разную ширину, поэтому вам также придется вычислить это.

Изменить: Как кто-то сказал в другом ответе, это поведение браузера по умолчанию и должно быть оставлено в покое.

Edit2: Как поясняет пользователь dampe в комментариях, вам также придется запускать JavaScript после каждого изменения размера окна пользователем.

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

Начальная точка: 100% гарантированное ожидаемое поведение во всех браузерах и ситуациях.

Конечная точка: гарантированно выглядит великолепно в вашем мониторе/системе... вы рискуете, что она будет выглядеть как мусор в системе/сценарии, о которой вы даже не думали.

Сначала найдите готовое решение JavaScript или плагин jQuery... если вы не можете его найти, спросите себя, почему?

  • не практично
  • невозможно
  • не стоит проблем (низкий спрос)

Edit3: Я искал, чтобы удовлетворить свое любопытство. Я нашел поток с решением jQuery, а также ссылки на методы расчета ширины полосы прокрутки.

ИМХО, это пустая трата времени и ресурсов, но здесь ссылка для всех, кого это интересует...

http://expressionengine.com/archived_forums/viewthread/158703/

Edit4: Вот решение CSS, которое я нашел. Я не тестировал это, но если он будет работать, он будет милым.

html {
    overflow-y: scroll;
}

http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem

Редактирование 5:. Решение CSS работает, но не по душе. Он создает полосы прокрутки для каждой страницы, но когда они не нужны, они выделены серым или пустым... не элегантным.

Ответ 3

Вы также можете добавить с помощью php добавление значения левой позиции, когда вы находитесь на длинной странице, но полоса прокрутки будет разной ширины в разных браузерах/платформах, поэтому javascript будет единственным идеальным решением для пикселей.

Ответ 4

Если вы хотите использовать чистую опцию css, я считаю, что абсолютный позиционированный div внутри тела с шириной и высотой 100%, автоматическое переполнение и правое заполнение больше ширины полосы прокрутки заменят обычную полосу прокрутки, не меняя содержимое слева на длинных страницах.

Я знаю, что использовал эту технику давным-давно, но я не могу вспомнить точные css-причуды, которые мне пришлось использовать.