title: Fixed toolbar and the div under it can scroll
body: <p>I have a problem.</p>
  
  <p>My page is divided by left and right part.
  Each part has its toolbar and the content under the toolbar.</p>
  
  <p>I want to let the toolbar fix, only the content scroll.</p>
  
  <p>but When I make the content {overflow:scroll},
  the too long content text will outside of the div. </p>
  
  <p>When I make the two part {overflow:scroll}, two toolbar{position:fixed}, the width of toolbar 1 will be 100%,covering toolbar2.</p>
  
  <p>p.s.this page uses javascripts. One is the sticky footer, and one is if the text of main content is too short, its div can be resize with the window. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.left {
    float: left;
    width: 20%; 
  }
  .right {
    float: right;
    width: 80%;
  } 
  .toolbar1 {
    position: fixed;
    background-color: red;
  }
  .toolbar2 {
    position: fixed;
    background-color: yellow;
  }
  .scroll {
    overflow: scroll;
  }
  .clear {
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="left"&gt;
    &lt;div class="toolbar1"&gt;asdfgh&lt;/div&gt;
    &lt;div class="scroll"&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;&lt;/div&gt;
  &lt;/div&gt; 
  &lt;div class="right"&gt;
    &lt;div class="toolbar2"&gt;123123&lt;/div&gt;
    &lt;div class="scroll"&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;1&lt;br&gt;&lt;/div&gt;
  &lt;/div&gt; 
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;footer&gt;footer&lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>