SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    0 Post(s)
    0 Thread(s)

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

    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 to see what I mean. Thanks a bunch!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)
    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.



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts