Полоса прокрутки сдвигает контент - PullRequest
Новая
       5

Полоса прокрутки сдвигает контент

9 голосов
/ 09 апреля 2011

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

<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;
}

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

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

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

Ответы [ 4 ]

10 голосов
/ 09 апреля 2011

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

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

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

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

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

Если вы настаиваете на исправлении того, с чем люди научились жить, это должно быть «динамическое» решение 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

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

10 голосов
/ 09 апреля 2011

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

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

0 голосов
/ 09 апреля 2011

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

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

0 голосов
/ 09 апреля 2011

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

...