title: Make body 100% height of browser window
body: <p>I have this structure:</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="header"&gt;..&lt;/div&gt;
  
      &lt;div id="content"&gt;..&lt;/div&gt;
  
      &lt;div id="footer"&gt;..&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <p>body {
          color: white;
          font-family: 'Play', sans-serif;
          max-width: 2560px;
          margin: 0 auto;
          min-width: 960px;
          height:100%;
          padding:0;
      }</p>
  
  <pre><code>#header {
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      min-width: 960px;
      height: 95px;
      background-image: url("../images/header-bg.png");
  }
  
  #content {
      margin: 0 auto;
      position: relative;
      max-width: 1600px;
      height:100%;
      overflow:hidden;
  }
  
  #footer {
    background-color: #009EDB;
    background-image: url("../images/footer-bg.png");
    bottom: 0;
    height: 30px;
    margin: 0;
    position: relative;
    width: 100%;
  
  }​
  </code></pre>
  
  <p>But not <code>body</code> height 100% of browser windows. What's my problem? Thanks.</p>
  
  <p><a href="http://jsfiddle.net/Rochefort/xkTpV/" rel="nofollow">jsFiddle</a></p>