title: How to make a div scroll able when window height is reached
body: <p>I have developed a template using bootstrap, the following <a href="https://jsfiddle.net/aaLuzkur/" rel="nofollow">Fiddle</a> represents the layout expected, where i want the yellow area to be scroll able when the content inside reaches window height, while the right red panel remains fixed.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="header"&gt;
  Header
  &lt;/div&gt;
  
  &lt;div class="content"&gt;
  
    &lt;div class="left-panel"&gt;
        &lt;div class="dummy-content"&gt;
            Results
        &lt;/div&gt;
         &lt;div class="dummy-content"&gt;
            Results
        &lt;/div&gt;
         &lt;div class="dummy-content"&gt;
            Results
        &lt;/div&gt;
         &lt;div class="dummy-content"&gt;
            Results
        &lt;/div&gt;
        &lt;div class="dummy-content"&gt;
            Results
        &lt;/div&gt;
         &lt;div class="dummy-content"&gt;
            Results
        &lt;/div&gt;
         &lt;div class="dummy-content"&gt;
            Results
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="right-panel"&gt;
      Map
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="footer"&gt;
  Footer
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body{
    text-align:center;
    width:100%;
    height:100%;
  }
  .header{
    background:black; 
    color:#fff;}
  
  .left-panel{
      background:yellow;
      overflow-y: scroll;
      float:left;
      width:50%;
      height:100%;
  }
  .dummy-content{
      height:150px;
  }
  .right-panel{
      background:tomato;
      height:100%;
      float:right;
      width:50%;
  }
  
  .footer{
    background:grey;
    position:absolute;
    bottom:0;
    width:100%;
   }      
  
  .content &gt; div{
    display:inline-block;
    vertical-align:top;
  }
  
  .content{
    clear:both;
  }
  </code></pre>
  
  <p>My problem is </p>
  
  <ul>
  <li>how to make the content inside scroll when content increase and once window height is reached</li>
  <li>the footer should not overlap the scroll able area when screen size is changed</li>
  <li>is it possible to provide a css fix only</li>
  </ul>