Вёрстка « Одинаковое положение страницы со скроллом и без

Всем добрый день.
Не смог кратко и четко изложить суть вопроса в заголовке...
Возьмем к примеру Вконтакте. Есть ли на странице вертикальный скролл или нет, она отображается всегда "нормально", т.е. не смещается немного влево от того, что появился скролл.
Когда я делаю страницу и на ней мало контента - скролла нет. Если же он появляется, то страница как бы отпрыгивает немного влево (т.к. скролл появился). Т.е. если открыть одну и ту же страницу с контентом и без и переключать вкладки, будет видно что она немного "прыгает"
Как так сделано Вконтакте?

Специально снял видео: http://youtu.be/21uvzDQlVpU

Простите за сбивчивость, но не могу толком выразить этот эффект словами.
0
css html верстка

1 ответов

Если вы посмотрите исходники VK, то увидите такую хрень:
во 1, они обрабатывают резайз боди:


onresize="onBodyResize()"
 

<div class="scroll_fix_wrap" id="page_wrap">
  <div>
    <div class="scroll_fix" style="width: 1902px; ">
    ...
    </div>
  </div>
</div>
 
Обнаруживаем, что значение width: в scroll-fix меняется по ресайзу.
Колупаем дальше CSS (приеду домой допишу):

.scroll_fix_wrap {
text-align: left;
direction: ltr;
}
.scroll_fix {
position: relative;
width:1902px;
}
 
А так как у враппера ширина 1920px, a у скроллфикса 1902 - то и получается 18 пикселей места для возможного скроллера.
Посмотрите сами firebug`ом каким что-ли.
1

Вообще, чтобы не париться по поводу наличия/отсутствия скролла, всегда пишите в CSS такое:


html {
    overflow-y: scroll
    }
 
1