title: scrolling only parts of the page while making them cover the entire screen
body: <p><img src="https://i.stack.imgur.com/vGnG9.jpg" alt="enter image description here"></p>
  
  <p>What is the best way of achieving this?</p>
  
  <pre><code>&lt;div class=container&gt;
   &lt;div class=topbar&gt;&lt;/div&gt;
   &lt;div class=leftbar&gt;&lt;/div&gt;
   &lt;div class=content-wrap&gt;
    &lt;div class=content-hearer&gt;&lt;/div&gt;
    &lt;div class=content&gt;&lt;/div&gt;
    &lt;div class=content-footer&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.body .head{margin:0; height:100%}
  .container{height:100%}
  .topbar{width:100%; height:30px}
  .leftbar {width: 50px; height: 100%; overflow: auto; float: left}
  .content-wrap{height: 100%; overflow: auto; float: left}
  .content-header{height:30px}
  .content{height:100%; overflow:auto}
  .content-footer{height:35px}
  </code></pre>
  
  <p>I Want to cover the entire page...and only want left bar and content to scroll when required else cover the remaining space. All other things are fixed</p>