Problems with a layer with a "height: 100%" attribute

[FiXXXer]

G'day all!

I'm having issues with a pesky little layer. The problem is not too bad, but I'd like to figure it out. This layer: <div id="LayerSidebar" style="position:absolute; left:30px; top:172px; width:1px; height: 100%; z-index:3"></div> looks great on most of my pages, but when there's a lot of content it starts to leave white space near the bottom of the screen. I thought that with the height: 100% variable the line should go to the bottom no matter what. Am I wrong? How do I get it to go all the way to the bottom? Check out http://www.zorianka.com/Templates/current_events.html to see what I mean. Thanks a bunch!

[Paul O'B]

I thought that with the height: 100% variable the line should go to the bottom no matter what

100% is basically 100% of the viewport so the div that you are using for a red line will only be 1 page long. If the div had content in it the you could hack it around so that it extends. Therefore you would need that div to encompass your whole page so that the content will extend it. (You could get the red line by having it as the left border on the div (and there are also a couple of hacks you'd need for mozilla)

However, if all you are just using the div for is to put a red line down the page then why don't you use a background image in the body element and then you can repeat it all the way down the y-axis.

body {
background-image: url(line.gif);
background-repeat: repeat-y;
background-position: 100px 0;
}

This will repeat a line down the page at 100pixels from the left and starting at the top.

Hope this was what you were trying to do.

Paul