SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% Height, driving me LOONEY

    Alright, its been a while since I've done coded out a layout, let alone a CSS layout... I need some help here, I'm trying to get this full height and I've pulled out all of my hair trying to do so

    http://www.xixel.net/PT3/

    Any help or guidance would be greatly appreciated

  2. #2
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, height:100% doesn't work at all in a number of cases. width:100% is usually all right though even that doesn't work well sometimes. But I don't recommend trying to set height as a percentage. Even if you can get it to work, when you're making changes elsewhere in your CSS file, they can all too easily make your height crash.

    The most important thing will be to let your content fill it out. If you're doing that, nothing else will look horribly bad. There is one trick you might try though.

    Turn the problem around. Look at it not as trying to get the body to stretch 100%, but getting the footer to stay at the bottom of the screen. If I remember I got my website to work by setting the div to bottom:0. That worked once I put a wrapper div around it and align the wrapper vertical-align:baseline. You have to set both divs to position:absolute. Hope that gets you going in the right direction.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    I use

    html, body {height : 100%; overflow : visible;}

    which works in all the browsers that I tried it in.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    That seems logical felgall, i'll give it a good kicking and see what falls off.

  5. #5
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would try and take the the footer div out of the container div (which is set to 100&#37. Then give the container a bottom margin of -58px (the height of your footer). Then add a new div inside the container where the footer div used to be with height:58px; clear:both; (used essentially as padding for where the footer will go). Then put the footer div right outside the container div and right after it, and I think it should work. For more details and where I learned this from, visit: http://www.sitepoint.com/forums/showthread.php?t=143801 (Paul O'B is the man)

    But like they said above, I wouldn't put too much into this if you can't get it, b/c once you have content on the site, it should fill it self out.
    Thank you, Chuck Norris.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    your header logo image is missing, and maybe rethink how you do your body and header image, your code 100&#37; high
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>PT3</title>
    <style type="text/css">
    *{padding:0;margin:0;}
    
    body{background: url('images/header-tile.gif') 0% 0% repeat-x;}
    
    html,body{height:100%;}
    
    #container{
    background: url('images/side-tile.gif') 0% 0% repeat-y;
    margin-top:-58px;
    }
    
    * html #container{height:100%;}
    head+body #container{min-height:100%;overflow:auto;}
    
    #header{
    height:140px;
    background: url('http://www.xixel.net/PT3/images/logo1.gif') 0% 0% no-repeat;
    border-top:58px solid #fafafa;
    }
    
    #hright {
    float:right;
    width:51px;
    height: 140px;
    background: url('images/header-cap.gif') 0% 0% no-repeat;
    }
    
    #left{
    float:left;
    width:225px;
    background: url('images/side-nav.gif') 0% 0% no-repeat;
    }
    
    #right{
    float:right;
    width:51px;
    height:100px;
    background: url('images/content-cap.gif') 0% 0% no-repeat;
    }
    
    
    #middle{
    overflow:auto;
    font-size:80%;
    background: url('images/content-tile.gif') 0% 0% repeat-x;
    }
    * html #middle{float:left;}
    * html #middle p,* html #footer{height:1%;}
    
    #footer{
    overflow:hidden;
    background: url('images/bottom-tile.gif') 0% 0% repeat-x;
    min-height:1%;
    }
    
    #fleft,#fright {height:58px;}
    
    #fleft{
    float:left;
    width:225px;
    background: url('images/side-bcap.gif') 0% 0% no-repeat;
    }
    
    #fright {
    float:right;
    width:51px;
    background: url('images/bottom-cap.gif') 0% 0% no-repeat;
    }
    
    h1,h2,h3,h4 { margin: 0.2em 0 }
    p{margin: 0.5em 0}
    
    	
    #sidenav {
    margin:50px 0 0 0;
    padding:0 15px;
    list-style:none;
    }
    
    #sidenav li{background: url('images/side-dots.gif') repeat-x bottom right;}
    
    #sidenav a {
    padding-left: 15px;
    display: block;
    font-family: Verdana, Tahoma, Sans-Serif;
    font-size: 10px;
    text-decoration: none;
    color: #808080;
    height: 25px;
    line-height: 25px;
    background: url('images/bullet.gif') 4px 11px no-repeat;
    }
    
    #sidenav a:hover,#sidenav  a:active {
    background: #f2f2f2 url('images/redbullet.gif') 4px 11px no-repeat;
    cursor: pointer;
    text-decoration: underline;
    color: #333333;
    }
    
    </style>
    </head>
    <body>
    
    
    <div id="container">
    
    
    <div id="header">
    
    <div id="hright"></div>
    
    </div>
    
    <div id="left">
    <ul id="sidenav">
    <li><a href="##">Side Item</a></li>
    <li><a href="##">Side Item</a></li>
    <li><a href="##">Side Item</a></li>
    <li><a href="##">Side Item</a></li>
    <li><a href="##">Side Item</a></li>
    </ul>
    </div>
    
    <div id="right">&nbsp;</div>
    
    <div id="middle"><p>Content.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Now to make it full height... ugh</p></div>
    
    
    </div>
    
    
    
    <div id="footer">
    
    <div id="fleft"></div>
    
    <div id="fright"></div>
    
    </div>
    
    
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, thanks alot for your time! makes more sense to me - again greatly appreciated


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
  •