SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    england
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation 100% height divs, in IE Firefox and Opera!

    This is driving me mad!

    I have the body tag set to 100%, a container div set to 100% height, and then there was divs within that which all need to be 100% height, but IE, firefox and Opera interpret it all differently!!!!!!!!!!!!!!!!
    The body is not 100% height in Firefox no matter what I type in, and Opera and IE both do what I want, but not at the same time!

    Are there any links that anyone knows of to good tutorials or information about this problem?

    Alternatively if anyone knows a solution based on what I've said I'd love to hear the answer!

    Cheers!

  2. #2
    The MacGyver of Design bronze trophy Johan Dahlström's Avatar
    Join Date
    Oct 2004
    Location
    Uppsala, Sweden
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's an awful lot of exclamation marks. Can't possibly expect me to believe that someone can scream that loud.

    Now, try something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
     
    <head>
    <title>Titel</title>
     
    <style type="text/css">
    #aDiv { width: 450px;
               height: 100%;
               background: #fff;
               border: 1px solid #000;
             }
    
    html, body { height: 100%; margin: 0; padding: 0; }
    
    </style>
    </head>
     
    <body>
     
    <div id="aDiv">
    Text
    </div>
     
    </body>
     
    </html>

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    body, html {height: 100%;}
    html>body #wrap {height: auto;}
    #wrap {height: 100%; min-height: 100%;....
    #wrap is the 100% height div.

    I think there is a better way, can't remember it. This should work though.

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for me the height 100% never worked in all my web career!
    for body use the margin:0px and for height i suggest to use a simply javascript to detect the users screen resolution and then to resize the heigh and width!

  5. #5
    SitePoint Addict Tim_Rogovets's Avatar
    Join Date
    Aug 2003
    Location
    Odessa, Ukraine
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's how I solved this problem:
    Code:
    body {
    margin:0px;
    height:100%;
    width:100%;
    padding:0px;
    }
    .leftdiv {
    position:absolute; left:0px; top:0px; height:100%; width:150px; z-index:1;
    }
    .rightdiv {
    position:absolute; 
    right:0px;
    top:0px; 
    height:100%; width:151px; z-index:1;
    }
    .maindiv {
    position:absolute; left:0px; top:0px; width:100%; z-index:3;
    }
    .bottomdiv {
    position:absolute; left:0px; bottom:0px; height:1px; width:100%; z-index:2;
    }
    The left, main and right divs all stretch for the whole visible space in user's browser.
    The bottom div is a 1px border at the bottom of visible space of user's browser.

    Works fine in IE, Moz, FF: http://whoshotornot.com
    CEO of Grandiz! - a team based in Odessa, Ukraine.
    Designing and developing sophisticated web apps on CodeIgniter!

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    england
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you all for your advice and help

    The problem I have which is causing the main problem, I have worked out, is that before the divs start on the page, I have a table. Commenting the table out, everything works as it should, but for some reason the 100% value doesn't take into account the table, and gives different results in each browser!

    Strange. I don't know a work around for this!

    Thanks for your help again.

  7. #7
    SitePoint Addict Tim_Rogovets's Avatar
    Join Date
    Aug 2003
    Location
    Odessa, Ukraine
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can try using absolute positioning for the divs, but make them 'below' the table by setting their z-index lower than the one you set for your table...
    If that doesn't work - you can also try placing the table inside another absolutely-positioned div
    CEO of Grandiz! - a team based in Odessa, Ukraine.
    Designing and developing sophisticated web apps on CodeIgniter!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    100% height is explained fully in the FAQ and explains all the limitations and workarounds.

    Note that you can't start a 100% element some distance from the top of the viewport and expect it to finish at the bottom of the viewport. 100% height will go from where the element starts and then go 100% until it finishes. If its starting point isn't the top of the viewport then it will continue through the bottom of the viewport until it completes its 100%.

    Mozilla (and opera) won't inherit 100% into subsequent nestings they will only inherit 100% from html, body. Subsequent nestings will collapse to zero. You can get around this by using display:table and display:table-cell (although there are some browsers that won't like it).

    Here's an example that satisfies most modern browsers and uses the techniques discussed above.

    http://www.pmob.co.uk/temp/hundredpe...lay-table2.htm

    Read the FAQ for a more thorough explanation.

    Paul


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
  •