100% height content

**scouse** · 06-30-2008 05:04 AM

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

**Centauri** · 06-30-2008 07:03 AM

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.

**scouse** · 06-30-2008 07:59 AM

Ah ok I understand! I'll have to think of another way round my problem then! Thanks

Thread: 100% height content

Thread Tools

Display

100% height content

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions