Нет правильной прокрутки на веб-странице

Question

Я написал сайт, как показано на картинке here.
Кодекс:

<div id="mainDiv" class="container"> 
     <div id="header"> 
      <div class="plc"> 
       <h1><a href="#"></a></h1> 
       <nav> 
        <div id="navPos"> 
         <div style="position: relative;right: 113px;">Register</div> 
         <div style="position: absolute;right: 255px;top: 37px;">Login</div> 
         <div style="position: absolute;top: 38px;right: 123px;">Market</div>  
        </div> 
       </nav> 
      </div> 
     </div> 
     <div id="body" class="container-fluid"> 
      <div id="container"> 
       <div id="overlay"></div> 
       <div id="menu"></div> 
       <div id="formPos"></div> 
       <div id="or">OR</div> 
       <div id="fbReg"> 
        <img src="images/fbOne.png" id="fbIcon"> 
        <div id="fbPos">Register with Facebook</div> 
       </div> 
       <div id="gReg"> 
        <img src="images/gPlus.jpg" id="gIcon"> 
        <div id="gPos">Register with Google</div> 
       </div> 
       <div id="cliPos"> 
        <img src="images/Bistip-in-media.png" id="imgCli"> 
       </div> 
      </div> 
     </div> 
     <div id="footer"> 
      hello 
     </div> 
    </div> 

CSS можно найти в этом jsfiddle. Проблема в том, что только тело прокручивается, но верхний и нижний колонтитулы не прокручиваются. В результате я не вижу нижнего колонтитула. Как я могу это исправить? Для достижения наилучших результатов, расширение выходного окна jsfiddle

Answer 1

В любое время вы не находите свиток, потому, что есть overflow:hidden; свойство, которое должно быть удалено или изменено на «авто»

В вашем случае:

1) Удалить overflow:hidden; или overflow:auto; 2) Если вы не хотите прокрутки в содержании (т.е. часть за исключением Header & колонтитул)

DEMO

CSS

html,body 
{ 
    overflow:auto; /* Or just REMOVE overflow*/ 
} 


#body 
{ 
    overflow:auto; /* Or just REMOVE overflow*/] 
}