SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Taking up 100% page height

    I have developed a template that I like, and everything seems to work in both IE and firefox, except that I can't figure out how to make it stretch to take up the full height. http://75.185.5.253/portfolio/ is the location. {{{{HERE}}}} is the area I can't seem to stretch out, if anyone can figure it out or give me some pointers that would be great.
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT

  2. #2
    SitePoint Zealot krt's Avatar
    Join Date
    Sep 2005
    Location
    Australia
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The height is relative to the parent element. If you want 100&#37; height, the page has to be 100% too, like so:

    Code:
    body, html {
      height: 100%;
      overflow: hidden;
    }
    BTW, did you want 100% of the viewport to be the minimum height?

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Ontario Canada
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by krt View Post
    The height is relative to the parent element. If you want 100% height, the page has to be 100% too, like so:

    Code:
    body, html {
      height: 100%;
      overflow: hidden;
    }
    BTW, did you want 100% of the viewport to be the minimum height?
    I would'nt use overflow: hidden here. This would disable the scrollbars on the page.

    krt is right though, set body and html to height 100% as well as any other parent elements.

  4. #4
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's already set to 100&#37; height for both, if you take a look in portfolio.css.

    This does basically nothing in FF, and in IE 6 it extends it beyond a single page scroll.I just want to ensure that my footer always gets pushed to the bottom of the page. If I have enough content it looks great, but when I don't have that much content it doesn't extend
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Ontario Canada
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change

    #outer {
    min-height: 100&#37;;
    }

    to

    #outer {
    height: 100%;
    }

    That should do it ^_^

  6. #6
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In firefox, yes, in IE, it extends it beyond a single page-scroll. Any idea how to fix it in IE?
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT

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

    Well as you are using the old method of tables for layout then I guess Ie6 would probably like the old doctype also.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    That will fix the page straight away but leave you in quirks mode which is not advisable.

    If you want to move away from tables then the FAQ on 100&#37; height (and the one on putting a footer at the bottom) explains how to do this without using tables. There are also examples in the 3 col sticky thread at the top of the forum.

    If you must use tables then the only way I know of doing something like this in IE6 in standards mode is to use the same method that I used for the footer technique and relies on having a fixed height header and footer.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    
    html, body {height:100%;}
    body {font-family:arial, helvetica, sans-serif;}
    
    #header {
        background:green;
        height:100px;
        position:relative;
        z-index:999;
        text-align:center;
        border-bottom:1px solid #000;
    }
    #outer {
        border-collapse:collapse;
        table-layout:fixed;
        width:100%;
        height:100%;
        margin:-101px 0 -61px;
        padding:0;
    }
    
    #outer td {
        padding:101px 8px 61px;
        vertical-align:top;
    }
    
    #outer .left {
        width:100px;
        background-color:red;
        border-right:1px solid #000;
    }
    
    #outer .center {
        background:#cdc;
    }
    
    #outer .right {
        width:100px;
        background:red;
        border-left:1px solid #000;
    }
    
    #footer {
        border-top:1px solid #000;
        background:green;
        color:#ff;
        height:60px;
        text-align:center;
    }
    
    </style>
    </head>
    <body>
    <div id="header">Header</div>
    <table id="outer">
        <tr>
            <td class="left">Left</td>
            <td class="center">Centre</td>
            <td class="right"> Right</td>
        </tr>
    </table>
    <div id="footer">Footer</div>
    </body>
    </html>
    However its a long time since I've played around with tables so there may be other ways of doing this

  8. #8
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I keep having issues with tables, so I guess it's off to the intarwebs to find out how to do it with all CSS then
    Shame, took so long just to get it to work almost right in both IE and Firefox.
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT

  9. #9
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, so check this out:
    http://75.185.5.253/portfolio_rework/css.html

    Almost got it right, except I can't get the gray background with green border to extend with the rest of the content. Any ideas?

    EDIT: I mean to have it extend without needing content, similar to my initial problem.
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT

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

    You could use a left repeating y image on the body and a right repeating image on #outer to give you your right and left full length borders.

    Your also need to control the content from running over the footer (see faq on putting a footer at the bottom).

    If you want three actual columns then its probably easier if you follow my instructions which explain all aspects of this:

    http://www.pmob.co.uk/temp/3colfixedtest_4.htm

  11. #11
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't have it repeat y because the image is a repeat x one. I got the content over running the footer fixed, now just to figure out how to make the gray box extend all the way down.
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT

  12. #12
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just removed that background image and I made a different one. I used the background on #outer for the left one, then put a floating bar for the right one. It now looks almost the exact same in all of the following: Firefox 2.0.0.7, IE 5.55, IE6, and IE7. In IE5.0 the PNG transparency hack doesn't work, and in both 5.5 and 5.0 there's a small gap either above or below the right border, but overall I'm very happy. Thanks for all your help guys, not only is it much cleaner but it has a smaller size thanks to your guidance. I appreciate all the help. Now to figure out how to test it on a Mac without actually using a Mac...
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT


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
  •