title: How to set div scrollable when content more than size of the page?
body: <p>I have the next page:</p>
  
  <pre><code>&lt;div id = "menu"&gt;
      Menu on the left side
  &lt;/div&gt;
  &lt;div id = "header"&gt;
      Header content of the page
  &lt;/div&gt;
  &lt;div id = "body"&gt;
      Data Data Data Data Data Data Data 
  &lt;/div&gt;
  &lt;div id = "footer"&gt;
      Additional Information
  &lt;/div&gt;
  </code></pre>
  
  <p>Whith Next layout: Menu should be on the left side:</p>
  
  <pre><code>#menu{
      background: #244a7c;
      padding: 7px 23px 0 7px;
      width: 299px;
      height: 1000px;
      overflow: inherit;
      margin-left: 0px;
      display: block;
      float: left;
  }
  #header{
      display: inline-block;
      width: 400px;
      border-bottom: 1px solid rgb(238, 238, 238);
  }
  </code></pre>
  
  <p>Body can have different data inside. My problem is:</p>
  
  <p>When content of the body more than user page I want to fix all <code>div</code> except body. Menu should be on the left side, Header should be on the top of the page and footer on the bottom and ONLY body should be scrollable.</p>
  
  <p>Any help, please.</p>
  
  <p>Thanks!</p>