www.webdeveloper.com
Results 1 to 3 of 3

Thread: 100% height content

  1. #1
    Join Date
    Oct 2003
    Posts
    205

    100% height content

    Hi,

    I'm building a layout for a new site that is horizontally centered with a header and a footer. This I've managed to do, but for the content area I want it to fill the remaining space betweent the header and footer no matter how much content is actually in the area.

    My css:

    Code:
    html{
      height: 100%;
      max-height: 100%;
      margin: 0;
      padding: 0;
    }
    
    body{
      margin: 0;
      padding: 0;
      height: 100%;
      max-height: 100%;
    	background-image: url(images/background.jpg);
    	background-position: left top;
    	background-repeat: repeat-x;  
    }
    
    #container{
      height: 100%;
      margin: 0 auto;
      width: 926px;
    
    }
    
    .wrapper { 
        min-height: 100%; 
        height: auto !important; 
        height: 100%; 
        margin: 0 auto -179px; 
    } 
    
    /* Header Css */
    #header{
    	background-image: url(images/header_background.gif);
    	background-position: top left;
    	background-repeat: repeat-x;
      margin: 0;
      padding: 0;
      width: 926px;
      height: 140px;
    
    }
    
    
    /* Main Content CSS */
    
    #main_content{
      margin: 0;
      padding: 0;
      height: 100%;
      min-height: 100%;
      background-color: red;
    }
    
    /* Sitemap Css */
    .footer, .push { 
        height: 179px; 
    } 
    
    #sitemap{
    	background-image: url(images/footer_background.gif);
    	background-position: top left;
    	background-repeat: repeat-x;
      margin: 0;
      padding: 0;
      width: 926px;
      height: 119px;
    }
    
    /* Affiliates CSS */
    #affiliates{
      margin: 0;
      padding: 0;
      width:926px;
      height: 60px;
    }
    and this is the HTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Askaprice - Template</title>
    <link rel="stylesheet" type="text/css" href="askaprice2.css" />
    </head>
    
    <body>
    
    <div id="container">
    
    
    <div class="wrapper"> 
      <div id="header">
        This is where the header goes
      </div>
      
      <div id="main_content">
        This is where the main content goes
      </div>
      
      <div class="push"></div> 
    </div>   
      
      <div class="footer"
        <div id="sitemap">
          This is where the sitemap goes
        </div>
        
        <div id="affiliates">
          This is where the affiliates goes
        </div>
      </div>
    </div>
    
    </body>
    </html>
    In the CSS I've put background-color: red just to see whether the content area is stretching the full height but it isn't, it is only putting the red colour behind any actual content. Which is "This is where the main content goes" in this case and I can see the background image I've used for the BODY for the rest of the area. Have I just missed something simple off?

    Thanks

    Phil

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    What you have missed is that you cannot force an element to fill available height, and in any case 100% of "auto" is still "auto". The whole point of the min-height 100% layout is that you use the background of the wrapper to make it LOOK like the content extends between header and footer.

  3. #3
    Join Date
    Oct 2003
    Posts
    205
    Ah ok I understand! I'll have to think of another way round my problem then! Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles