title: CSS DIV AUTO fill Height and Width (overflow is Scroll bar)
body: <p>Any one can HELP me ?</p>
  
  <p>I tried many Days, and many source.
  But, I can find answer.</p>
  
  <ul>
  <li><p>I need creat 4 DIV by CSS.</p></li>
  <li><p>Header div is 100px, and always in TOP.</p></li>
  <li><p>Footer div is 100px, and always in BOTTOM 
  (also, if client browser resize, it always in Bottom, no change Layout)</p></li>
  <li><p>Left div is Width 200px (Height: auto fill)</p></li>
  <li><p>MAIN div is AUTO fill Height and Width (overflow is Scroll bar)</p></li>
  </ul>
  
  <p>Please, help me FULL CODE HTML, or CSS, or Javascript.
  Because, I not good for CSS...</p>
  
  <p>please, see this picture:
  <img src="https://i.imgur.com/y6yPZdH.jpg" alt="example"></p>
  
  <p>here is an example of the html, it's ok in FF but not IE</p>
  
  <pre><code>&lt;html&gt;
  &lt;body style="margin: 0; padding: 0;"&gt;
      &lt;div style="position: absolute; background: #faa; height: 100px; top: 0px; width: 100%;"&gt;
          header
      &lt;/div&gt;
      &lt;div style="position: absolute; background: #afa; top: 100px; bottom: 100px; left: 0;
          width: 100px;"&gt;
          left
      &lt;/div&gt;
      &lt;div style="position: absolute; background: #afa; top: 100px; bottom: 100px; right: 0;
          width: 100px;"&gt;
          right
      &lt;/div&gt;
      &lt;div style="position: absolute; background: #faa; height: 100px; bottom: 0px; width: 100%;"&gt;
          footer
      &lt;/div&gt;
      &lt;div style="position: absolute; background: #aaf; bottom: 100px; left: 100px; top: 100px;
          right: 100px; overflow: auto;"&gt;
          &lt;p&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt;
              &lt;p&gt;Aliquam tincidunt tempor
              velit quis volutpat. Nulla pharetra pulvinar arcu sed lacinia.&lt;/p&gt;
              &lt;p&gt; Nulla ultrices aliquet
              sem, vitae commodo elit condimentum ut. Nulla consectetur facilisis nibh, et tempus
              purus pellentesque nec. Ut eu nibh ut arcu mattis luctus. &lt;/p&gt;
              &lt;p&gt;Cras at interdum quam.
              Pellentesque imperdiet mi vitae felis sollicitudin iaculis. &lt;/p&gt;
              &lt;p&gt;Maecenas accumsan tortor
              neque, at posuere felis. Quisque ultricies mi quis dolor pellentesque elementum.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/GPhJU" rel="nofollow noreferrer">demo</a></p>