-
Div not expanding to 100% of browser’s height
I’m having an issue getting my Div to expand to 100% of a browser’s height when vertical scroll is needed and can’t find any answers to it.
If you visit my home page and resize your browser so that a vertical scroll is needed, you can see what I am talking about: stadcreative.com
Watch the blue bar with the logo on the right hand side and when you scroll down you’ll notice it no longer maintains it’s 100% height dimensions.
Any thoughts on what I can do to force it to always maintain 100% coverage while scrolling would be greatly appreciated. Here is the coding:
<div id=”BarBlue”>
<div align=”center”>
<p><img src=”Elements/Logo.png” alt=”Stad Creative” width=”128″ height=”129″ vspace=”300″ align=”absmiddle” /></p>
</div>
</div>#BarBlue {
position:absolute;
width:184px;
height:100%;
z-index:1;
background-image: url(Elements/BAR.VRT.Blue.png);
background-repeat: repeat;
left: 875px;
} -
5 Replies
-
The easiest solution I can think right now is to add the blue bar to your background image.
-
You have a number of code errors, which can affect how your html is rendered. Check them at https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.stadcreative.com%2F if you like. And is there a random div close tag between head and body …?
There’s a thread at https://stackoverflow.com/questions/4973/setting-a-divs-height-in-html-with-css that might help (second answer).
-
Hmm that would fix it for sure but because I have my BG image repeat on it’s x axis the blue bar would repeat on freakishly wide browsers. This is however a good backup plan if I can’t solve it any other way.
-
Thanks for the links, as a self taught coder I’m pretty ignorant to a lot. I shall be using that validator site from now on. There is definitely a stray div close tag I never noticed. It would also seem I have not closed a lot of tags properly.
From the forum you linked to it seemed to say, set the body to 100% height as well but that didn’t seem to do the trick. I’ll try to explore a little deeper there.
-
If you are trying to expand a background image 100% vertically, make sure you set the html and body element to 100%.
html, body{height:100%;}
body {
background-image:url(‘/images/repeating-image.jpg’);
background-repeat:repeat-y;
}
Reply to this Discussion! Login or Sign Up