FORUMS: list search recent posts

Div not expanding to 100% of browser's height

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Mike StadnyckyjDiv not expanding to 100% of browser's height
by on Aug 15, 2011 at 5:11:49 pm

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


Return to posts index

Fernando MolRe: Div not expanding to 100% of browser's height
by on Aug 15, 2011 at 5:32:22 pm

The easiest solution I can think right now is to add the blue bar to your background image.


Return to posts index

Mike StadnyckyjRe: Div not expanding to 100% of browser's height
by on Aug 15, 2011 at 6:14:25 pm

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.


Return to posts index


Dave PoRe: Div not expanding to 100% of browser's height
by on Sep 22, 2011 at 4:27:43 pm

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


Return to posts index

Mike SmithRe: Div not expanding to 100% of browser's height
by on Aug 15, 2011 at 5:54:21 pm

You have a number of code errors, which can affect how your html is rendered. Check them at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.stadcreative.c... if you like. And is there a random div close tag between head and body ...?

There's a thread at http://stackoverflow.com/questions/4973/setting-a-divs-height-in-html-with-... that might help (second answer).


Return to posts index

Mike StadnyckyjRe: Div not expanding to 100% of browser's height
by on Aug 15, 2011 at 6:26:04 pm

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.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]