title: Div won't stretch the full height of the page (yup, I've Googled plenty)
body: <p>I'm trying to stretch the content of a div the height of the page. I've Googled the problem and so far nothing works. The whole thing is starting to give me a headache. Perhaps someone more experienced could take a look at my code? The full stylesheet is >400 lines, so I'm including what is (hopefully) relevant.</p>
  
  <p>"Wrapper" takes up 100% of the page height, whereas "contentShadow" stretches only to the height of the text in the div "content".</p>
  
  <p>Edit: as far as I can tell, every container has its height set to 100%, which whould make "contentShadow" 100% as well. Right...?</p>
  
  <p>Edit 2: <strong>I'm starting to see the problem, but don't know how to solve it</strong>. While the following code will keep the footer down, it also means that since .wrapper doesn't have height:100%, "contentShadow" will not stretch. The question then is how I keep my footer down while changing this code:</p>
  
  <pre><code>.wrapper {
  min-height: 100%;
  height: auto !important;
  margin: 0 auto -37px;
  </code></pre>
  
  <p>}</p>
  
  <p>To this:</p>
  
  <pre><code>.wrapper {
  height: 100%;
  </code></pre>
  
  <p>}</p>
  
  <hr>
  
  <p>Basic structure of the page:</p>
  
  <pre><code>&lt;div id="body"&gt;
  &lt;div id="headerWrapper"&gt;&lt;/div&gt;
  &lt;div id="wrapper"&gt;  
      &lt;div id="contentShadow"&gt;
          &lt;div id="#contentWrapper"&gt;
              &lt;div id="content"&gt;
              &lt;!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page --&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div id="push"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Css rules relevant to these divs:</p>
  
  <pre><code>html, body {
  height: 100%;
  }
  
  #headerWrapper {
  height: 314px;
  width: 100%;
  }
  .wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -37px;
  }
  
  #contentShadow {
  min-height: 100%;
  width: 994px;
  background-image: url(../images/contentShadow.png);
  background-repeat: repeat-y;
     margin-right: auto;
  margin-left: auto;
  }
  
  #contentWrapper {
  min-height: 100%;
  width: 940px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  padding-top: 17px;
  background-color: #EDECEC;
  overflow: hidden;
  }
  
  #content {   
  min-height: 100%;
  }
  
  .footer, .push,  {
  height: 37px;
  }
  
  .footer {
  background: white;   
  clear: both;
  height: 37px;
  }
  </code></pre>