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!

@Yvette here's an example of what I want to have happen:: http://lrxd.com/ — Shadna, Jun 24 '13 at 21:19

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

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.

edited May 23 '17 at 11:56

Community

1
1

answered Jun 24 '13 at 20:47

Serlite

12,130
5
38
49

Hmmm... I see what you're saying but when I remove the "absolute" position it is no longer "glued" to the top and bottom. There's about a 260px gap from the top of the page and the div. – Shadna Jun 24 '13 at 21:17
Interesting. Do you have any other elements in the document besides those listed? I copied/pasted your code into a blank HTML document and played around with it there until it worked as specified. That reminds me, you can also drop the top:0, left:0, since those aren't needed anymore. – Serlite Jun 24 '13 at 21:38
Yeah. I have a fixed menu and logo at z-index 900 and text divs inside the scalableimage div. – Shadna Jun 24 '13 at 21:42
The fixed menu could be the problem. An element with position:fixed will scroll with the window, and won't stay at the top of the document... I've added a JSFiddle to show you what I'm getting. You could provide the additional code, if you think it might make a difference. – Serlite Jun 24 '13 at 21:47
Nevermind... that's cool! Here's a link to my full code:: [link](http://jsfiddle.net/shadna/8hkt9/) – Shadna Jun 24 '13 at 22:17
Added an edit to my answer, let me know if it solved your problem. – Serlite Jun 25 '13 at 14:49
I see! So you're doing a line height... testing now. – Shadna Jun 25 '13 at 16:09
Eh? Line height? Er, that was a style already there. The only thing I changed for the latter two elements was only the padding and margin... – Serlite Jun 25 '13 at 16:15
Sorry... got that wrong. Not the line heigh but padding and margin changes. Seems to be working great! Just making a few tweaks to get the black boxes nested in the correct position. Other than that it's working out! THANKS A TON! – Shadna Jun 25 '13 at 16:24
Great! Glad I could help you out there. – Serlite Jun 25 '13 at 16:39
Okay. So I made changes to the JSFiddle. I'm perplexed as to why my bottom nav won't position to bottom:0. The HTML shows that it should be positioned to the parent div (#bg) but it won't. I'm working on solving but, if you have an answer that would be icing on the proverbial programming cake you've already baked for me. Thanks again for your time and willingness to help me troubleshoot. Cheers! – Shadna Jun 25 '13 at 16:45
Happy to help! Hmmm, have you tried adding position:relative to #bg, and position:absolute to the bottom nav element? I think that's what you're talking about. – Serlite Jun 25 '13 at 16:52
Got it! Changed #bottomNav position from 'inherit' to absolute. Thanks again! – Shadna Jun 25 '13 at 16:57

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

1 Answers1