title: Height 100% not working
body: <p>So I have a div that is supposed to have 100% height. It's only parent element is <code>&lt;body&gt;</code>, so 100% should be the height of the window. But instead of spanning the height of the screen, it only is as high as the container element inside it. The funny thing is, if I use fixed positioning, it does what I want it to. Alas, I can't use fixed in the site layout.  Here is my css. If you would like to see what the site looks like right now, here is the link: <a href="http://ion.comli.com/projects/" rel="noreferrer">http://ion.comli.com/projects/</a></p>
  
  <pre><code>body, ul { 
      margin: 0;
      padding: 0;
  }
  
  body {
      background: url('/images/background.png') no-repeat fixed;
  }
  
  
  /* CONTENT */
  
  .content{
      margin-left: auto;
      margin-right: auto;
      position: absolute;
      top: 50px;
      left: 15%;
      height: 100%;
      width: 70%;
      background-color: #ffffff;
  }
  
  /* END CONTAINER*/
  
  /* CONTAINER */
  
  .container{
      background: #ffffff;
      margin: 5% 10%;
      text-align: center;
  }
  
  .container .title a {
      font-family: Franchise, "sans-serif";
      font-size: 48px;
      color: black;
      line-height: 48px;
      text-align: center;
      text-decoration: none;
  }
  
  .container .date {
      font-family: Ubuntu, "sans-serif";
      font-size: 12px;
      color: #666666;
      line-height: 12px;
      text-align: center;
      text-decoration: none;
  }
  
  .container .body {
      font-family: Ubuntu, "sans-serif";
      font-size: 16px;
      text-align: left;
  }
  
  /* END CONTAINER */
  
  /* PROJECT */
  .project {
      display: block;
      margin: 5% auto;
      height: 100px;
      width: 500px;
      border-radius: 10px;
      background: url("/images/background.png");
      opacity: 0.5;
  }
  
  .project h2 {
      font-family: Franchise;
      font-size: 48px;
      color: white;
      text-align: center;
  }
  
  /* END PROJECT */
  
  /* NAVIGATION */
  nav ul {
      background-color: #1b1b1b;
      display: table;
      list-style: none;
      position: fixed;
      top: 0;
      height: 50px;
      width: 100%;
      box-shadow: 0 0 6px #888888;
      z-index: 1;
  }
  
  nav ul li {
      float: left;
  }
  
  nav ul li a {
      display: table-cell;
      height: 50px;
      line-height: 50px;
      padding: 0 65px;
      font-family: Ubuntu;
      font-size: 16px;
      color: #ffffff;
      text-decoration: none;
      background-color: #292929;
  }
  
  nav #title {
      font-family: Lobster;
      font-size: 36px;
      line-height: 50px;
      border-right: 1px solid #ffffff;
      background-color: #1b1b1b;
  }
  
  nav #menu {
      padding: 0 25px;
      background-color: #1b1b1b;
  }
  
  nav #menu:hover {
      box-shadow: none;
      background-color: #292929;
  }
  
  nav li:hover #menu {
      box-shadow: none;
      background-color: #292929;
  }
  
  nav ul ul {
      background: #292929;
      display: none;
      position: absolute;
      top: 100%;
      right: 0px;
      width: 15%;
  }
  
  nav ul ul li {
      background: #292929;
      float: left;
      position: relative;
      clear: both; 
  }
  
  nav ul li:hover &gt; ul {
      box-shadow: none;
      display: block;
  }   
  
  /* END NAVIGATION */
  
  /* SCROLLBAR */
  
  /* END SCROLLBAR */
  </code></pre>
  
  <p>Any way I can get this div to span the whole 100%? I'm pretty sure there is a simple answer to this question, but I can't find it. Thanks in advance!</p>