SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    to
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cover 100% height in Netscape/Mozilla using css

    I am trying to figure out how to get my content background to cover 100% of the height of the browser window. I use height: 100%; in my CSS and that works in IE but not in Netscape or Mozilla. Can anyone help me?

    Here is the site:
    http://www.rit.edu/~mbc9195/737/midterm/capstone.html

    Thanks

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

    You need to set 100% height for the html element as well. Then you need to set 100% in your #whole style but also a min-height:100% and then height:auto which you need to hide from IE.
    Code:
    body {
     font-family: Georgia, Arial, Helvetica, sans-serif;
     background-image: url(http://www.rit.edu/~mbc9195/737/midt...background.gif);
     margin-top: 0px;
     margin-bottom: 0px;
     font-size: 12px;
     color: #ffffff;
    }
    html,body {height:100%;}
    p {
     width: 500px;
     text-align: justify;
     font-family: Georgia, Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #ffffff;
     padding-left: 50px;
     line-height: 20px;
     margin-bottom: 10px;
     }
     
    p.center {
     text-align:center;
    }
    				  
    #whole {
     width: 576px;
     margin-left: auto;
      margin-right: auto;
     height:100%;
     min-height:100%
    }
    body>#whole {height:auto}	  
    #content {
     width: 572px;
    height: 100%;
     text-align: left;
     background-color: #9A0505;
     padding-top: 0px;
     border-left : 2px ridge #663300; 
     border-right : 2px ridge #663300; 
     color: #ffffff;
    }
    Ie only needs 100% and it will expand as required. Mozilla and other browsers will only grow to 100% and then content will overflow. Therefore these browsers use min-height of 100% which ie doesn't understand and will start the element at 100% height.

    However for the element to increase they need height auto which needs to be hidden from ie otherwise it won't obey the 100%. (with me so far ).

    So we use the child (>) selector hack to hide the auto from IE.

    The above code should do the trick for you. The height will be 100% unless content is greater then it will expand as required. (hopefully)

    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
  •