title: 100% wide Footer, outside main wrap, must extend to bottom of page
body: <p>
  There is lots of info to get footer 100% wide or to extend 100% to bottom of browser.</p>
  
  <p>My problem is a little different.</p>
  
  <p>All the content of my site is wrapped in max-width container. But client wants the footer to be 100% wide and then if the page info is short, the footer must stretch to bottom of page.</p>
  
  <p>So I have to put the footer outside the main container so that it can go right across the width of the page. But this means I can't use the</p>
  
  <pre class="lang-html prettyprint-override"><code>html , body {height:100%;}
  </code></pre>
  
  <p>option because making the footer 100% high will not help as it is outside main container.</p>
  
  <p>So, ignoring the main container, how do I tell the standalone 100% wide footer to fill to the page to the bottom of the browser if the page is too short to fill the screen from top to bottom? How do i get the footer to fill that gap on the bottom?</p>
  
  <p>Here is a simple copy of the code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
  &lt;style&gt;
  
      #main {
          height: 100px;
          max-width: 900px;
          background-color: blue;
          margin: auto;
      }
  
      footer {
          width: 100%;
          background-color: lightblue;
          color: white;
      }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
          &lt;div id="main"&gt;
          &lt;/div&gt;
  
          &lt;footer&gt;
              Footer content
          &lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do I get the lightblue footer to go all the way to the bottom?</p>
  
  <p>And please note that I don't want the footer to stick to the bottom, I need it to extend to the bottom of the browser from where ever it is on the bottom of the page.</p>