title: Simple Responsive Design--How do I create a sticky header and footer and then force the content div to expand between them?
body: <p>Thanks for looking.</p>
  <p>I am trying to make a very simple responsive HTML layout:</p>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;header&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;footer&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>#header{
      width: 100%;
      height: 50px;
  }
  
  #content{
      width: 100%;
      height: 100%;
  }
  
  #footer{
      width: 100%;
      height: 50px;
  }
  </code></pre>
  <p>The end-product should be a page that has a 50px tall header anchored to the top of the screen and a 50px tall footer anchored to the bottom of the screen.  In between, the &quot;content&quot; div should expand to fill the space between the header and footer no matter what the size of that space.</p>
  <p>I have already checked out several tutorials on &quot;sticky footers&quot; and, unfortunately, they aren't quite what I am after as they do not account for the &quot;content&quot; div expanding to fill the space between header and footer.</p>
  <p>This is a close example of what I am after, but this site is written in Flash:</p>
  <p><a href="http://www.wearegolden.co.uk/" rel="nofollow noreferrer">http://www.wearegolden.co.uk/</a></p>
  <p>Try resizing your screen when you look at this.</p>
  <p>What am I missing here?  Thanks!</p>
  <h1>SOLVED!</h1>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;header&quot;&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;content&quot;&gt;
      content
  &lt;/div&gt;
  
  &lt;div id=&quot;footer&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>html, body {height: 100%; margin:0px !important;}
  
  #header{
      position: fixed;
      top: 0;
      height: 50px;
      width: 100%;
      background-color: #777;
      z-index: 1;
  }
  
  #content{
      padding-top: 50px;
      padding-bottom: 50px;
      background-color:#ffffcc;
      position: fixed;
      top:0px;
      bottom:0px;
      width:100%;
  }
  
  #footer{
      background-color: #777;
      position: fixed;
      bottom: 0;
      height: 50px;
      width: 100%;
      z-index: 1;
  }
  </code></pre>
  <p>THANKS!</p>