How to make DIV header 100% but still allow for vertical scrolling?

Question

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 ::

<div id="ScalableImage"></div>
<div id="BlockWhite" style="height:1000px"></div>
<div id="BlockBlue1" style="height:300px"></div>
<div id="BlockBlue2" style="height:50px"></div>

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!!!

Anyways, here's the CSS for the ScalableImage and the color blocks ::

#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;
}

Ideas?

Thanks!

Answer 1

The reason why "#ScalableImage" overlaps "#BlockBlue1" is because you have position: absolute in your styling of "#ScalableImage" - so it gets pulled out of the layout, and as such covers other elements.

To achieve what (I think) you're looking for, you may want to remove that position:absolute style, then add:

body, html{
    height:100%;
    margin:0;
}

(The 0 margin is just in case the browser renders the body/html elements with a margin.)

I hope this is helpful for you. Good luck!

(Edit) Added a JSFiddle to show you what I'm seeing: http://jsfiddle.net/BDd62/

(Edit 2) Having seen your additional code, I think I've identified the reason for that white space. It's because of your top margin on "#htxt", which actually moves its parent element in this case. (You can read a more in-depth explanation of which this happens here. You can avoid this in a couple ways, but here are the changed areas in your CSS that I made. If this isn't the layout you wanted, please let me know:

#bg {
    display:block;
    width:100%; 
    height:100%;
    max-height:900px;
    background: url(http://bwpcommunications.com/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;
}
#htxt {
    position:relative;
    font-family: 'Raleway';
    font-weight:bold;
    font-size: 6em;
    text-align:center;
    color:#FFF;
    width:80%;
    max-width:960px;
    line-height:100px;
    margin:0 auto 22%;
    padding:22% 0 0;
    z-index:800;
}
#hsubtxt {
    position:relative;
    font-family: 'Raleway';
    font-size: 3em;
    text-align:center;
    color:#FFF;
    width:80%;
    margin:2% auto 0;
    z-index:800;
}

Hope this helps you out! Here's your updated JSFiddle to see the full code, but I suggest running it in a full browser (since your layout isn't optimized for the small window size of the JSFiddle environment.