title: How to make DIV header 100% but still allow for vertical scrolling?
body: <p>After looking for a few solutions here it seems everyone has the opposite problem that I'm facing (ha!). Here's what I'm trying to accomplish: I have a DIV that on page load is 100% width and 100% height. This is so that no mater the screen size we always get a full homepage image. However, we want to be able to scroll below that for additional content. I'm at a point where I have rigged it to work a bit but it's glitchy. Here's the HTML ::</p>
  
  <pre><code>&lt;div id="ScalableImage"&gt;&lt;/div&gt;
  &lt;div id="BlockWhite" style="height:1000px"&gt;&lt;/div&gt;
  &lt;div id="BlockBlue1" style="height:300px"&gt;&lt;/div&gt;
  &lt;div id="BlockBlue2" style="height:50px"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>You can see here that "BlockWhite" is styled to be 1000px tall. That's because it get's hidden behind the "ScalableImage". I can't get it to nest below!!!</p>
  
  <p>Anyways, here's the CSS for the ScalableImage and the color blocks ::</p>
  
  <pre><code>#ScalableImage {
  position: absolute; 
  display:block;
  top:0; 
  left:0; 
  width:100%; 
  height:100%;
  max-height:900px;
  background: url(/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index:700;
    }
  
  #BlockBlue1 {
  position:relative;
  float:left;
  background-color:#c5d1d1;
  width:110%;
  margin-left:-10px;
  margin-bottom:-10px;
  min-height:20px;
  clear:both;
  }
  #BlockBlue2 {
  position:relative;
  float:left;
  background-color:#95aab2;
  width:110%;
  min-height:20px;
  margin-left:-10px;
  margin-bottom:-10px;
  clear:both;
  }
  
  #BlockWhite {
  position:relative;
  float:left;
  background-color: #fff;
  width:110%;
  min-height:20px;
  margin-left:-10px;
  margin-bottom:-10px;
  clear:both;
  }
  </code></pre>
  
  <p>Ideas? </p>
  
  <p>Thanks!</p>