title: Child Div is not stretching to fit the contents of the browser window vertically.
body: <p>I have a site with a google map canvas on it. It has a header, a footer, and a side panel on each side, a container div and a map canvas div.</p>
  
  <p>The container div contains the side panels and the map-canvas div. My problem is that I cannot get the container div and all divs it contains to stretch to the contents of the browser window vertically.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;   
          &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header id="header"&gt;&lt;/header&gt;
              &lt;div id="container" &gt;
                  &lt;div id="panel"&gt;&lt;/div&gt;
                  &lt;div id="panel2"&gt;&lt;/div&gt;
                  &lt;div id="map-canvas"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;footer id="footer"&gt;&lt;/footer&gt;
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container{ height: 100% auto;min-height:500px; width:100% auto;z-index:2;overflow:auto;}
  #map-canvas { width:100% auto; height: 100% auto; min-height:500px; margin: 0px; z-index:3;padding: 0px; font-family: NotoSans, Helvetica, Arial; }
  #panel   { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:left; }
  #panel2  { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:right; }
  #header { background-color: #F0F0F0 ; width:100%; min-width:1000px; z-index:3;height:100px;}
  #footer { background-color: #F0F0F0 ; width:100%; z-index:4;min-width:1000px;height:100px;}
  html, body{ height:100%;width:100%; margin: 0px; z-index:2;padding: 10px; font-family: NotoSans, Helvetica, Arial; }
  </code></pre>