Страницы полосы прокрутки, конфликтующие с позиционированием элементов баннера

Question

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

Спасибо, Грант

Вот мой CSS для баннера/заголовка и панели навигации

/*TOP BANNER SECTION*/ 

#banner { 
height: 100px; 
    position: relative;} 

#logo {position:relative; 
top: -90px; 
left:700px;} 

#ip_box { 
     width:210px; 
     height:43px; 
     background:#212121;     
     color: white; 
     font-size: 15px; 
     bottom: 10px; 
     left: 77px; 
     position: absolute;} 

#ip_text {bottom: 11px; 
      left: 64px;   
      color: white; 
      position:absolute;} 

#teamspeak_box {width:159px; 
       height:43px; 
       background:#212121; 
       bottom: 10px; 
       right: 76px; 
       position: absolute;} 

#teamspeak_box_2 {width:43px; 
        height:43px; 
        background:#313131; 
        bottom: 10px; 
        right: 191px; 
        position:absolute;} 

#teamspeak_text {color: white; 
       bottom: 21px; 
       right: 66px; 
       position: absolute;}   

#teamspeak_image {bottom: 9px; 
       right: 104px; 
       position: absolute;} 

#red_bar {border-bottom: 5px solid #C62828; 
bottom: 190px; 
position:relative;} 

/*TOP NAV BAR SECTION*/ 

* {margin: 0px; 
    padding: 0px;} 

#nav_bar {background-color: #313131; 
      height: 45px; 
      text-align: center; 
      position:relative;} 

#nav_bar ul {padding: 0;} 

#nav_bar > ul > li {display: inline-block;} 

#nav_bar ul > li > a {color: white; 
         display: block; 
         text-decoration: none; 
         font-weight: normal; 
         padding-left: 15px; 
         padding-right: 15px; 
         line-height: 45px; 
         transition: all 0.5s ease;} 

#nav_bar ul li ul {display: none; 
        list-style: none; 
        position: absolute; 
        background: white; 
        margin-left:0px; 
        box-shadow: 0px 1px 5px; 
        text-align: left; 
        z-index:1;} 

#nav_bar ul li a.active-page {background-color: #212121;} 

#nav_bar ul li:hover ul li a {line-height: 2em;} 

#nav_bar ul li a:hover {background: #212121; 
transition: all 0.5s ease; 
} 

#nav_bar ul li:hover ul {display: block;} 

#nav_bar ul li ul li a {color: #000000; 
         display: block;} 

#nav_bar ul li ul li a:hover {background: #1565C0; 
           color: white; 
transition: all 0.5s ease;} 

Answer 1

Добавить overflow-y: scroll к элементу тела, это заставит полосу прокрутки, чтобы всегда показывать.

Answer 2

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