title: Very simple CSS minimum height 100% issue with margin
body: <p>I'm looking for suggestions how to set a div to min-height:100% when it has a 15px margin-top? What I want is for the div to touch the bottom of the screen (without triggering scrollbars), however when the content is too large to fit, it automatically expands below the screen limit, triggering scrollbars. Here's what Ive got so far:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  body, html{height:100%; margin:0;}
  body{background:#AAA}
  #main{position:relative; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="main"&gt;
  try duplicating this content until it does not fit in the box 
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>