title: 100% height minus header?
body: <p>I want to create a layout for an admin panel, but I dont know how to get the #nav and #content container always at 100% of the browser window. I don't understand the inherit of 100% height attributes, could someone explain it more clearly?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;index.htm&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
          &lt;div id="header"&gt;
              &lt;img src="./img/header_logo.png" alt="bla"/&gt;
          &lt;/div&gt;&lt;!-- #header --&gt;
          &lt;div id="nav"&gt;
          &lt;/div&gt;&lt;!-- #nav --&gt;
          &lt;div id="content"&gt;
          asfdg
          &lt;/div&gt;&lt;!-- #content --&gt;
          &lt;div class="clear"&gt;
          &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.css</p>
  
  <pre><code>    html, body{
      font-family: Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
      margin: 0px;
      padding: 0px;
      height: 100%;
  }
  img{
      margin: 0px;
      padding: 0px;
      border-width: 0px;
  }
  #wrapper{
  
  }
  #header{
      background: url(img/header_bg.png) repeat-x;
      height: 65px;
      padding-top: 20px;
      padding-left: 25px;
  }
  #nav{
      width: 235px;
      float: left; 
      background-color: #f7f7f7;
      border-right: 1px solid #d9d9d9;
      height: 100%;
  
  }
  #content{
      float: left;
      width: auto;
      padding: 15px;
  
  }
  .clear{
      clear: both;
  }
  </code></pre>
  
  <p>any ideas?</p>