title: CSS: div expanding to window height, with margin-bottom fixed
body: <p>I've been trying to do something extremely simple, yet I can't make it work!</p>
  
  <p>Here's what I'm trying:</p>
  
  <p>---margin top: 15 px</p>
  
  <p>---VARIABLE HEIGHT DIV (imagine a box-like element)</p>
  
  <p>---margin bottom: 15px</p>
  
  <p>I basically want the box to resize based on the browser window height.</p>
  
  <p>Here's what I've been trying:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre> body {
      background-color: #D0CDC5;
      height:100%
  }
  
   #info_box {
      background-color: rgba(40,40,40,0.5);
      border: rgba(34,34,34,0.9) 1px solid;
      width: 350px;
      height: 100%;
      margin: 15px 0px 15px 20px;
  }
  
   #info_box p {
      color: red;
  } </pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="info_box"&gt;
  &lt;p&gt;Sample Content&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>By the way, why is that the text appears 15px from the top of the div? Why isn't it flush?</p>
  
  <p>Thanks a lot guys,</p>
  
  <p>**EDIT</p>
  
  <p>See this link, very good answer for all browser but IE6 and 7. <a href="https://stackoverflow.com/questions/5768029/another-html-css-layout-challenge/5768262#5768262">another HTML/CSS layout challenge</a>
  Thanks to @Hristo!</p>