Центрированные страницы CSS, длина которых превышает один экран, отображаются на 5 пикселей дальше слева от более коротких страниц - как мне это остановить?

Question

Эта проблема уже давно озадачила меня, и я пытался ее исследовать, но пока я только что нашел сайты, которые говорят мне, как центрировать вещи, но это не проблема.Проблема в том, что, хотя #content выглядит как центрированный, когда страница занимает более одного экрана, она заставляет #content отображаться примерно на 5 пикселей слева от того места, где оно появляется, когда его высота меньше одного экрана.Есть ли способ исправить это, не заставляя мои короткие страницы достигать нижнего экрана или за его пределами?

Вот как я центрирую свой контент:

body {
    margin: 0;
    padding: 0;
}

#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}

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

Answer 1

@ asc99c верно.

Полоса прокрутки вызывает вашу проблему.

Когда он появляется, он все толкает.

Чтобы решить эту проблему (если нужно), вы можете сделать свои страницы выше, чем на 100%. Что-то вроде

body, html{
    height:100%;
}

div{
    height:101%;
}

Основным содержанием является div div.

Пример: http://jsfiddle.net/jasongennaro/7NYnS/

Answer 2

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

html {
  overflow: -moz-scrollbars-vertical; 
  overflow-y: scroll;
}

Через http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/