View Full Version : Stretching CSS over entire page

02-19-2004, 06:43 AM
I'm having some problems with my CSS on a webpage that I'm doing. I have a solid colored bar on the right side of the page that I have set to a height of 100%. but when the page scrolls down the bar disapears, is there anyway to make it so the bar goes from the top to the bottom of the scroll?

Len Whistler
02-19-2004, 07:09 AM
I'm new myself but I will take a crack at solving this one.....I assume this colored bar is a division? I think the bar will go down as far as the content in the division. No content and it stops at the bottom of the page.

Leonard Whistler

02-19-2004, 07:11 AM
there is no content in the bar, it's just a blank bar that needs to go to the bottom of the page. It's a separate division from everything else

02-19-2004, 09:04 AM
Either link to the page, or attach the html file to a post and we will be able to help you.
Mind reading isn't a specialty 'round here ;)

02-19-2004, 09:27 AM
Here's the page:


whenever the page has to scroll the side bar doesn't continue with the page

02-19-2004, 10:15 AM
That is one choked up page!
I couldn't figure out how you implemented the bar because your page is very poorly structured and all the inline styles and tons of messy tables make it practically illegible.

Get rid of the inline styles, move 'em all to the style sheet, get rid of deprecated attributes, and for crying out loud get rid of every single font element!!! The font element is evil, superfluous, ugly, bulky, pointless, not needed, and just plain bad! Did I mention ugly?
CSS provides everything you need to style fonts.

By the way: the page looks great, nice layout, snazzy color scheme, but the implementation leaves a lot to be desired. I don't think you will find it very pleasant to maintain in the long run either, so cleaning it up will be doing yourself the biggest favour.

02-19-2004, 10:18 AM
There is a reason for this mess. The entire page is ASP based, so whoever maintains the page can go in to the admin page and change everything from there. I would normally use a .css page to cover up all the junk, but then I wouldn't be able to utilize the asp variables

02-19-2004, 03:55 PM
Oh... well... I can't really figure that out, but anyway.
I've been toying with the page, and it seems like the height of that seperator you were asking about is derived from the height of the viewport (window), rather than the content. I still can't find how it's done, but maybe that'll give you a clue.

02-19-2004, 05:43 PM
when you do height:100%, should it do the whole page or just the viewport (window)?

02-19-2004, 11:51 PM
Originally posted by jgallen
when you do height:100%, should it do the whole page or just the viewport (window)?

Viewport. Doh!

The technique I was going to recommend was floating the bar from inside the content div, the giving it a margin which would push it outside the content div. (ensuring to leave a 1px overlap)
But seeing as this is such a convaluted table mess I really can't help.
All the best,

02-20-2004, 02:18 AM
ok, I cleaned up a lot of the mess, see if you guys can help me out now. Right now I have a temp fix of making it a set size for the sidebar, but this makes it so when it is viewed on larger resolutions, you will have a lot of white space.

Doesn't this problem seem like it should be a lot easier to fix? Oh well....

02-20-2004, 10:51 AM
Phew... so it's the "vert-line" div, right?
Why don't you create that divider by defining a left side border on the content div? That way, it'll allway be as long as the content and the exact height is not an issue.
If you want to keep using the absolutely positioned div, the key is to make it a child of a suitable container with explicitly defined "position:relative". That should make the vert-line div inherit it's properties from the container, including it's height.

02-20-2004, 05:32 PM
Hmm, it doesn't look like there is any way for me to get what I'm looking for huh? I'd love it if it would cover the entire page and cover everything while scrolling. No way of doing that huh?