SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: height in CSS?

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    height in CSS?

    Maybe I'm missing something here, but I have great difficulty with the 'height' attribute when I want a div to go (vertically) from wherever it starts (top:..px) right down to the bottom of the browser window, in a multi-column layout for instance, and stay there when user resizes browser window.

    This is in case I want the div to be a container (with a background color for example) for my content.

    I tried 'height:100%', 'bottom:0', things like that.

    Sometimes I get it to work, but usually in one browser at a time and when I don't use a DOCTYPE declaration.

    I have tested on Windows (IE 5, 6 and Netscape 7), MacOS9.2 (IE 5, Netscape 7) and never could get it completely right .

    Thanks for advice

  2. #2
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well...the heigth attribute (in my opinion) is practically useless most of the time...it's not really used for making things extend to the bottom of the page and what not. either way...check out http://www.glish.com/css/ and see if that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RockNRollPig
    the heigth attribute (in my opinion) is practically useless most of the time...it's not really used for making things extend to the bottom of the page and what not.
    Thanks RnR.

    I've also (reluctantly) begun to come round to that conclusion.

    The problem remains, though, in case your columns are fluid (so you can't use a body background image) and you want them down to the bottom.

    I'll have a look at glish.com (didn't know that one, looks pretty complete), let folks know in case I find something there.

    Cheers,
    P

  4. #4
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are ways around that. An example of what you're trying to achieve might help.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi yngwin

    Here's an example, without height attributes, and probably the style rules could be cleaner (possible redundancies here and there):

    (edited out the link here, see post #7)

    So that's the kind of thing, only with the three columns going all the way down.

    In this example, the three columns are fluid.
    Last edited by pietro; Oct 24, 2003 at 12:10.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and yes, one solution is to use javascript (with or without third-party scripts such as X-Library, as described here:

    http://www.sitepoint.com/article/1213

    )

    But of course I'd like to avoid that

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just came back and realized I had a bad file version online, so the link is now dead (I don't have time to fix it right now).

    Sorry about that.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So here's a demo page with detailed explanations.

    There's a div with main content in it and borders to simulate the sidebar backgrounds.

    Works partly or fully in Netscape 7, IE5+, Opera

    http://pietrot.free.fr/full_height.htm


Bookmarks

Posting Permissions

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