+ Reply to Thread
Results 1 to 6 of 6

Thread: Getting a Div to stretch the whole height of a page

  1. #1
    Zenax's Avatar
    Zenax is offline Lord Of The Keys Zenax is an unknown quantity at this point
    Join Date
    Jul 2006
    Location
    The Brilliant United Kingdom
    Posts
    1,339

    Getting a Div to stretch the whole height of a page

    How do I make it so that a div stretches the entire height of the page, no matter the length of content etc.

    So someone could have a story that is 50,0000 words long (just an example, no one would really have that length on a website) and it would stretch forever!!

    Any help recieved, I am grateful of!

    Regards,
    Zenax

    P.S This happens in all browsers, FF 2.0, IE7, IE6

    Can't figure it out for the life of me:

    CSS Code

    Code:
    body, html
    {
    background-color: #6C6C6C;
    margin: 0px;
    padding: 0px;
    height: 100%;
    }
    hr
    {
    background-color: #818181;
    color: #818181;
    }
    a:link, a:visited
    {
    color: #FFFF00;
    font-family: "Bookman Old Style";
    font-size: 12px;
    text-decoration: none;
    padding-left:5px;
    }
    a:hover
    {
    color: #FFFFFF;
    padding-left:5px;
    }
    #wrapper
    {
    background-image:url(../img/wrapper_bg.gif);
    background-repeat: repeat-y;
    width: 620px;
    height: 100%;
    padding-top: 10px;
    }
    .header
    {
    font-family:Arial, Helvetica, sans-serif;
    }
    .mainheader
    {
    font-size: 18px;
    color: #6C6C6C;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bolder;
    }
    #contentwrapper
    {
    width: 350px;
    font-family: "Bookman Old Style";
    font-size: 12px;
    margin-left: 200px;
    position: absolute;
    }
    .content
    {
    font-family:"Bookman Old Style";
    font-size:12px;
    }
    #navigationwrapper
    {
    background-color: #6C6C6C;
    color: #FFFFFF;
    font-family: "Bookman Old Style";
    font-size: 12px;
    width: 160px;
    margin-left: 30px;
    position: absolute;
    margin-top: 20px;
    }
    .navigation
    {
    font-family:"Bookman Old Style";
    font-size:12px;
    color: #FFFFFF;
    padding: 5px;
    width: 150px;
    }
    .login
    {
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #FFFFFF;
    font-size: 11px;
    padding: 2px;
    }
    .designedby
    {
    color: #FFFF00;
    font-size: 9px;
    font-family: Tahoma;
    padding-left: 10px;
    }
    .logo
    {
    width: 100%;
    border: 0px;
    margin-left: 30px;
    }
    img
    {
    border: 0px;
    }
    form
    {
    margin-left: 5px;
    }
    Regards,
    Zenax

  2. #2
    oab's Avatar
    oab
    oab is offline
    x10 Lieutenant oab is an unknown quantity at this point
    Join Date
    Apr 2005
    Location
    Olympia, WA
    Posts
    459

    Re: Getting a Div to stretch the whole height of a page

    min-height 100%;

    i think it only works on firefox though.
    http://www.teamoab.com

    aim:dknigh73
    msn:d_knight_3@hotmail.com

  3. #3
    Cubeform is offline x10 Lieutenant Cubeform is an unknown quantity at this point
    Join Date
    Aug 2006
    Location
    127.0.0.1
    Posts
    339

    Re: Getting a Div to stretch the whole height of a page

    Quote Originally Posted by oab View Post
    min-height 100%;

    i think it only works on firefox though.
    It doesn't work in Firefox. I've tried that declaration many, many times.

    Now, I did some Google searching (using "Getting a Div to stretch the whole height of a page" :drool: ), and this is what I found:

    Code:
    html, body {
      height: 100%; margin: 0px;
    }
    
    div#wrapper{ 
      min-height: 100%;
      height: auto;
      _height: 100%; /* IE Hack */
    }
    I've included a hack for Internet Explorer there (see the underscore) since it doesn't support min-height. I don't like hacks myself, so you can move it to an IE conditional statement:

    HTML Code:
    <!--[if lte IE 6]>
    <style>
    /* IE7 supports min-height, I think*/
    div#wrapper{ 
      height: 100%; 
    }</style>
    <![endif]-->
    Last edited by Cubeform; 12-05-2006 at 06:22 PM.
    CUBEFORM
    XHTML | CSS | PHP | JavaScript
    THIS WEEK


  4. #4
    Zenax's Avatar
    Zenax is offline Lord Of The Keys Zenax is an unknown quantity at this point
    Join Date
    Jul 2006
    Location
    The Brilliant United Kingdom
    Posts
    1,339

    Re: Getting a Div to stretch the whole height of a page

    now the bg stretches the height of the logo only
    Regards,
    Zenax

  5. #5
    remie is offline x10Hosting Member remie is an unknown quantity at this point
    Join Date
    Sep 2006
    Posts
    14

    Re: Getting a Div to stretch the whole height of a page

    hmm mayby for the next time use google

  6. #6
    Derek is offline Community Support Force Derek is a splendid one to beholdDerek is a splendid one to behold
    Join Date
    May 2005
    Location
    cossacks
    Posts
    6,354

    Re: Getting a Div to stretch the whole height of a page

    You mean like a resize code thats what i usally use

+ Reply to Thread

Similar Threads

  1. Blank page...?
    By DecemberGuild in forum Scripts & 3rd Party Apps
    Replies: 6
    Last Post: 11-24-2006, 01:20 AM
  2. Replies: 1
    Last Post: 09-05-2006, 06:53 PM
  3. Ads on Every Page?
    By ThaoD in forum Free Hosting
    Replies: 5
    Last Post: 08-23-2005, 05:44 PM
  4. Cannot edit in Front Page
    By katyW in forum Free Hosting
    Replies: 9
    Last Post: 05-26-2005, 06:34 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
x10hosting free hosting for the masses
dedicated servers