100% Height in CSS

1 reply [Last post]

Wed, 2007-03-07 23:27

ClevaTreva

Offline

Guru

A hilly place, UK

Last seen: 4 years 21 weeks ago

A hilly place, UK

Joined: 2004-02-05

Posts: 2902

Points: 0

by ClevaTreva, www.siteunderconstruction.net

Gosh, time to put electronic pen to virtual paper. The question of 100% height comes up often, sometimes almost every day on this forum.

And yet, what do we mean by 100% height? I shall take it that this is shorthand for 100% browser window minimum height. Why on earth do so many designers want it? Because they can do it quite easily in a table-based design, maybe? Well, I shall not debate this here. To be honest, I almost always make the designs I make be 100% height, and yet it is years since I did a table-based design.

Why then, is it so difficult? Surely we can set the body to min-height:100%? Aside from the problem that IE6 and earlier don't recognise min-height, other browsers don't really cope well with this setting on body either.

Can 100% height be done in such a way as to satisfy most browsers? Yes, but NOT for IE5.x on the Mac, or v4 browsers. But, as I consider these essentially dead (but maybe not yet buried), who cares? In fact, if you set IE5.x Mac to 100% height and width in the html css it will, due to a bug, add the height to the width!

Let's begin

The easy part is to add this to the css of the page:

  html,body{
  height: 100%;
  margin: 0;
  padding: 0;
}

This code sets us up for 100% height for all browsers, but now the fun begins. Somehow, we need to persuade the browsers to inherit this height to the divs we set up on the page. Experimentation shows that each browser needs different css prodding to do this.

So, do your own thing, and some time down the track you may find that a browser you didn't test for sets you back quite a way. In particular, Safari/Konqueror and Opera do not work as expected. And, of course, IE7 goes its own way. Curiously, with IE5 and 6 for the PC getting so much wrong, it can easily do 100% height - but of course, Microsoft removed this with IE7, without replacing it with what enables Firefox to do it. Nice one Bill.

Because of this, we will put an overall co ntaining div on the page. I shall call this div 'fullheightcontainer'. Assuming we are being good and tidy, here comes our code. Notice that for browsers other than IE, we need to make the div behave like a table, hence the display: table; setting - which, of course, IE doesn't support. Notice that I have also zeroed the margins and stuff on many elements to avoid other problems.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Your Page Title Here</title>
  <style type="text/css" media="all">
 
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
 
html,body {height: 100%;}
 
body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
 
input,select {
  margin: 0;
  padding: 0;
}
 
#fullheightcontainer {
  position: relative; /*** Let's be nice to IE ***/
  width: 100%; /*** Content Width ***/
  display: table; /*** For non-IE browsers ***/
  height: 100%;
  background: #FFCCCC; /*** Background colour of content section ***/
}
</style>
</head>
 
<body>
  <div id="fullheightcontainer">
  <p>Not much going on here!</p>
  </div>
</body>
 
</html>

Load it up. What do you notice? IE7 fails. Typical! Whilst ALL other browsers NEED 100% height on the fullheightcontainer, IE7 needs a min-height and no height. So, just for IE7, the height is set to auto, and a min-height comes in. We'll use a conditional comment to feed it ton IE7 only - but you'll need to put that code in an external stylesheet, to avoid failing validation.

Here comes the new version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Your Page Title Here</title>
  <style type="text/css" media="all">
 
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
 
html, body {height: 100%;}
 
body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
 
input, select {
  margin: 0;
  padding: 0;
}
 
#fullheightcontainer {
  position: relative; /*** Let's be nice to IE ***/
  width: 100%; /*** Content Width ***/
  display: table; /*** For non-IE browsers ***/
  height: 100%;
  background: #FFCCCC; /*** Background colour of content section ***/
}
 
</style>
<!--[if IE 7]>
<style type="text/css" media="all">
  #fullheightcontainer {height: auto; min-height: 100%;}
</style>
<![endif]-->
</head>
 
<body>
  <div id="fullheightcontainer">
  <p>Not much going on here!</p>
  </div>
</body>
</html>

Joy, it works - almost. To make this all work in ALL browsers, we can't put our content like I have just done - with a simple paragraph. We will put another div inside the fullheightcontainer called 'wrapper', and this is for all browsers OTHER than IE. We need wrapper to behave like a table cell, hence the display:table-cell; setting.

Also, due to the width on the fullheightcontainer, IE5.x will have problems if you want a border as well. An inner div with no set width fixes that, becuase you can put the border on this innner one and not fall foul of the broken box model. I use this elsewhere in these designs; an outer div with width and an inner one without to allow borders to be set on them. Again, this isn't supported by IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Your Page Title Here</title>
  <style type="text/css" media="all">
 
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse:separate;
  border-spacing: 0;
}
 
html,body {height: 100%;}
 
body {min-width: 770px} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
 
input, select {
  margin: 0;
  padding: 0;
}
 
#fullheightcontainer{
  position: relative; /*** Let's be nice to IE ***/
  width: 100%; /*** Content Width ***/
  display: table; /*** For non-IE browsers ***/
  height: 100%;
  background: #FFCCCC; /*** Background colour of content section ***/
}
 
#wrapper{
  display: table-cell; /*** For non-IE browsers ***/
  position: relative; /*** Let's be nice to IE ***/
}
 
</style>
<style type="text/css" media="all">
  #fullheightcontainer {height: auto; min-height: 100%;}
</style>
</head>
 
<body>
  <div id="fullheightcontainer">
  <div id="wrapper">
  <p>Not much going on here!</p>
  </div>
  </div>
</body>
</html>

Great, we're done, aren't we? Well, by now, we have a single div that fills up the whole page, with not much else.

Two Columns

Let's add a left column for navigation. We'll make life easy for ourselves and set this to 200px wide, and the content can take the rest of the width. The obvious thing is to float a column or two. But it won't inherit the 100% height. Aarrghh! We will need to add another two containing divs, which I will call 'outer' and 'float-wrap'. These will contain our two columns, which I will call 'center' and 'left'.

You will notice that these two containing divs have floats inside and so have the 'floatcontainer' class added as well. Note the use of floats and the table display.

Here comes the now much bloated code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Your Page Title Here</title>
  <style type="text/css" media="all">
 
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
 
html, body {height: 100%;}
 
body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
 
input, select {
  margin: 0;
  padding: 0;
}
 
#fullheightcontainer{
  position: relative; /*** Let's be nice to IE ***/
  width: 100%; /*** Content Width ***/
  display: table; /*** For non-IE browsers ***/
  height: 100%;
  background: #FFCCCC; /*** Background colour of navigation column now ***/
}
 
#wrapper{
  display: table-cell; /*** For non-IE browsers ***/
  position: relative; /*** Let's be nice to IE ***/
}
 
#outer{
  position: relative;
  margin-left: 200px; /*** Left Column Width ***/
  background: #ADD8E6; /*** Background colour of content column ***/
  height: 100%;
}
 
#float-wrap{
  width: 100%;
  float: left;
  display: inline;
}
 
#center{
  position: relative; /* fix for IE */
  width: 100%;
  float: right;
  height: 100%;
  display: table;
}
 
#left{
  float: left;
  display: inline;
  width: 200px; /*** Left Column Width ***/
  margin-left: -200px; /*** NEGATIVE Left Column Width ***/
  position: relative;
}
</style>
 
<!--[if IE 7]>
<style type="text/css" media="all">
  #fullheightcontainer{height:auto;min-height:100%}
</style>
<![endif]-->
</head>
 
<body>
  <div id="fullheightcontainer">
    <div id="wrapper">
      <div id="outer" class="floatcontainer">
        <div id="float-wrap" class="floatcontainer">
          <div id="center">
            <p>Not much going on here!</p>
          </div>
          <div id="left">
            <p>No links to see!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Gosh, perfect! Must be done by now, eh? Look at IE7. The background color of the center content column is truncated. Time for a faux column or two. These we add in at the start of the fullheightcontainer, with absolute position. They need some IE 7 only css too, and we can hide them for all other browsers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Your Page Title Here</title>
  <style type="text/css" media="all">
 
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
 
html,body {height: 100%;}
 
body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
 
input, select {
  margin: 0;
  padding: 0;
}
 
#fullheightcontainer {
  position: relative; /*** Let's be nice to IE ***/
  width: 100%; /*** Content Width ***/
  display: table; /*** For non-IE browsers ***/
  height: 100%;
  background: #FFCCCC; /*** Background colour of navigation column now ***/
}
 
#wrapper {
  display: table-cell; /*** For non-IE browsers ***/
  position: relative; /*** Let's be nice to IE ***/
}
 
#outer {
  position: relative;
  margin-left: 200px; /*** Left Column Width ***/
  background: #ADD8E6; /*** Background colour of content column ***/
  height: 100%;
}
 
#float-wrap {
  width: 100%;
  float: left;
  display: inline;
}
 
#center {
  position: relative; /* fix for IE */
  width: 100%;
  float: right;
  height: 100%;
  display: table;
}
 
#left {
  float: left;
  display: inline;
  width: 200px; /*** Left Column Width ***/
  margin-left: -200px; /*** NEGATIVE Left Column Width ***/
  position: relative;
}
 
#centerfill, #leftfill {display:none;}
 
</style>
 
<!--[if IE 7]>
<style type="text/css" media="all">
#fullheightcontainer { height: auto; min-height: 100%;}
 
#centerfill,#leftfill {
  display:block;
  position:absolute;
  top:0px;
  width:100%;
  min-height:100%;
  background:#ADD8E6;
}
 
 #leftfill {
  width:200px;
  background:#FFCCCC;
}
</style>
<![endif]-->
</head>
 
<body>
  <div id="fullheightcontainer">
  <div id="centerfill"><!-- Center column color filler for IE7 --></div>
  <div id="leftfill"><!-- Left column color filler for IE7 --></div>
  <div id="wrapper">
  <div id="outer" class="floatcontainer">
  <div id="float-wrap" class="floatcontainer">
  <div id="center">
  <div id="container-center">
  <p>Not much going on here!</p>
  </div>
  </div>
  <div id="left">
  <div id="container-left">
  <p>No links to see!</p>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
</body>
</html>

Finished? Well, I suppose we could put a div inside each column to contain the first block of content, just in case we want to put more blocks under these starter divs (I'll leave this to the end, look for divs with names like 'container-center', they have no css attached to them, but you can do that). What? Not enough? You want the navigation column on the right instead? Here it comes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Your Page Title Here</title>
  <style type="text/css" media="all">
 
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
 
html,body {height: 100%;}
 
body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
 
input, select {
  margin: 0;
  padding: 0;
}
 
#fullheightcontainer {
  position: relative; /*** Let's be nice to IE ***/
  width: 100%; /*** Content Width ***/
  display: table; /*** For non-IE browsers ***/
  height: 100%;
  background: #FFCCCC; /*** Background colour of navigation column now ***/
}
 
#wrapper {
  display: table-cell; /*** For non-IE browsers ***/
  position: relative; /*** Let's be nice to IE ***/
}
 
#outer {
  position: relative;
  margin-right: 200px; /*** Right Column Width ***/
  background: #ADD8E6; /*** Background colour of content column ***/
  height: 100%;
}
 
#float-wrap {
  width: 100%;
  float: left;
  display: inline;
}
 
#center {
  position: relative; /* fix for IE */
  width: 100%;
  float: right;
  height: 100%;
  display: table;
}
 
#right {
  float: left;
  display: inline;
  width: 200px; /*** Right Column Width ***/
  margin-right: -200px; /*** NEGATIVE Right Column Width ***/
  position: relative;
}
 
#centerfill, #rightfill {display: none;}
</style>
 
<!--[if IE 7]>
<style type="text/css" media="all">
#fullheightcontainer {height: auto; min-height: 100%;}
 
#centerfill, #rightfill {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ADD8E6;
}
 
#rightfill {
  left: 100%;
  width: 200px;
  background: #FFCCCC;
  margin-left: -200px;
}
</style>
<![endif]-->
</head>
 
<body>
  <div id="fullheightcontainer">
  <div id="centerfill"><!-- Center column color filler for IE7 --></div>
  <div id="rightfill"><!-- Right column color filler for IE7 --></div>
  <div id="wrapper">
  <div id="outer" class="floatcontainer">
  <div id="float-wrap" class="floatcontainer">
  <div id="center">
  <p>Not much going on here!</p>
  </div>
  </div>
  <div id="right">
  <p>No links to see!</p>
  </div>
  </div>
  </div>
  </div>
</body>
</html>

Not much diferent, but the right column is outside the float-wrap container.

Three Columns

Ah, go on then, add another column. Give us a left and right column. OK, combine the two sets of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Your Page Title Here</title>
  <style type="text/css" media="all">
 
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
 
html, body {height: 100%;}
 
body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
 
input, select {
  margin: 0;
  padding: 0;
}
 
#fullheightcontainer {
  position: relative; /*** Let's be nice to IE ***/
  width: 100%; /*** Content Width ***/
  display: table; /*** For non-IE browsers ***/
  height: 100%;
  background: #FFCCCC; /*** Background colour of navigation column now ***/
}
 
#wrapper {
  display: table-cell; /*** For non-IE browsers ***/
  position: relative; /*** Let's be nice to IE ***/
}
 
#outer {
  position: relative;
  margin-left: 200px; /*** Left Column Width ***/
  margin-right: 200px; /*** Right Column Width ***/
  background: #ADD8E6; /*** Background colour of content column ***/
  height: 100%;
}
 
#float-wrap {
  width: 100%;
  float: left;
  display: inline;
}
 
#center {
  position: relative; /* fix for IE */
  width: 100%;
  float: right;
  height: 100%;
  display: table;
}
 
#left {
  float: left;
  display: inline;
  width: 200px; /*** Left Column Width ***/
  margin-left: -200px; /*** NEGATIVE Left Column Width ***/
  position: relative;
}
 
#right {
  float: left;
  display: inline;
  width: 200px; /*** Right Column Width ***/
  margin-right: -200px; /*** NEGATIVE Right Column Width ***/
  position: relative;
}
 
#centerfill, #leftfill {display:none;}
</style>
 
<!--[if IE 7]>
<style type="text/css" media="all">
#fullheightcontainer {height: auto; min-height: 100%;}
 
#centerfill, #leftfill, #rightfill {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100%;
  background: #ADD8E6;
}
 
#leftfill {
  width: 200px;
  background: #FFCCCC;
}
 
#rightfill {
  left: 100%;
  margin-left: -200px;
  width: 200px;
  background: #FFCCCC;
}
</style>
<![endif]-->
</head>
 
<body>
  <div id="fullheightcontainer">
  <div id="centerfill"><!-- Center column color filler for IE7 --></div>
  <div id="leftfill"><!-- Left column color filler for IE7 --></div>
  <div id="rightfill"><!-- Right column color filler for IE7 --></div>
  <div id="wrapper">
  <div id="outer" class="floatcontainer">
  <div id="float-wrap" class="floatcontainer">
  <div id="center">
  <p>Not much going on here!</p>
  </div>
  <div id="left">
  <p>No links to see!</p>
  </div>
  </div>
  <div id="right">
  <p>Maybe some ads here!</p>
  </div>
  </div>
  </div>
  </div>
</body>
</html>

Header & Footer

OK? Done for you? Of course, no header or footer. You can't put them inside the fullheightcontainer. They go after it (footer first, then the header). The footer is just another div. Put a negative bottom margin on the fullheightcontainer to make it appear. The header is absolutely positioned back to the top (these new bits will work just as well for the single, two column or three column versions). I will make the header of two rows and the footer just one. Note the use of outer with width and inner without to allow borders if required:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Your Page Title Here</title>
  <style type="text/css" media="all">
 
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
 
html, body {height: 100%;}
 
body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
 
input, select {
  margin: 0;
  padding: 0;
}
 
#fullheightcontainer {
  position: relative; /*** Let's be nice to IE ***/
  width: 100%; /*** Content Width ***/
  display: table; /*** For non-IE browsers ***/
  height: 100%;
  margin-bottom: -30px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
  background: #FFCCCC; /*** Background colour of navigation column now ***/
}
 
#wrapper {
  display: table-cell; /*** For non-IE browsers ***/
  position: relative; /*** Let's be nice to IE ***/
}
 
#outer {
  position: relative;
  margin-left: 200px; /*** Left Column Width ***/
  margin-right: 200px; /*** Right Column Width ***/
  background: #ADD8E6; /*** Background colour of content column ***/
  height: 100%;
}
 
#float-wrap {
  width: 100%;
  float: left;
  display: inline;
}
 
#center {
  position: relative; /* fix for IE */
  width: 100%;
  float: right;
  height: 100%;
  display: table;
}
 
#left {
  float: left;
  display: inline;
  width: 200px; /*** Left Column Width ***/
  margin-left: -200px; /*** NEGATIVE Left Column Width ***/
  position: relative;
}
 
#right{
  float: left;
  display: inline;
  width: 200px; /*** Right Column Width ***/
  margin-right: -200px; /*** NEGATIVE Right Column Width ***/
  position: relative;
}
 
#footer{
  z-index: 1;
  position: relative;
  width: 100%;
  height: 0;
}
 
#subfooter1 {
  margin: 0;
  background: #FFFFCC;
  text-align: center;
  height: 30px;
  overflow: hidden;
}
 
#header{
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
 
#header-inner { 
  min-width: 770px; /*** Minimum Content Width ***/
  height: 0;
}
 
#subheader1 {
  margin: 0;
  background: #FFFFCC;
  text-align: center;
  height: 30px;
  overflow: hidden;
}
 
#subheader2 {
  margin: 0;
  background: #FFE7AA;
  text-align: center;
  height: 60px;
  overflow: hidden;
}
 
#centerfill, #leftfill {display: none;}
</style>
 
<!--[if IE 7]>
<style type="text/css" media="all">
#fullheightcontainer {height: auto; min-height: 100%;}
 
#centerfill, #leftfill, #rightfill {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100%;
  background: #ADD8E6;
}
 
#leftfill {
  width: 200px;
  background: #FFCCCC;
}
 
#rightfill {
  left: 100%;
  margin-left: -200px;
  width: 200px;
  background: #FFCCCC;
}
</style>
<![endif]-->
</head>
 
<body>
  <div id="fullheightcontainer">
  <div id="centerfill"><!-- Center column color filler for IE7 --></div>
  <div id="leftfill"><!-- Left column color filler for IE7 --></div>
  <div id="rightfill"><!-- Right column color filler for IE7 --></div>
  <div id="wrapper">
  <div id="outer" class="floatcontainer">
  <div id="float-wrap" class="floatcontainer">
  <div id="center">
  <p>Not much going on here!</p>
  </div>
  <div id="left">
  <p>No links to see!</p>
  </div>
  </div>
  <div id="right">
  <p>Maybe some ads here!</p>
  </div>
  </div>
  </div>
  </div>
  <div id="footer">
  <div id="subfooter1">
  <p>
  This is the Footer Row (with Fixed Height)
  </p>
  </div>
  </div>
  <div id="header">
  <div id="header-inner">
  <div id="subheader1">
  <p>
  This is Header Row #1 (with Fixed Height)
  </p>
  </div>
  <div id="subheader2">
  <p>
  This is Header Row #2 (with Fixed Height)
  </p>
  </div>
  </div>
  </div>
</body>
</html>

Whoops, that worked(ish). The content for the columns has disappeared under the header, and if it were long enough content, it would go under the footer too. One would think that adding top and bottom margin to the divs inside the columns would work, but it doesn't across browsers. So, we will put a sort of air bag above and below the content for the columns, the same heights as the total header and footer rows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Your Page Title Here</title>
  <style type="text/css" media="all">
 
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
 
html, body { height: 100%;}
 
body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
 
input, select {
  margin: 0;
  padding: 0;
}
 
#fullheightcontainer {
  position: relative; /*** Let's be nice to IE ***/
  width: 100%; /*** Content Width ***/
  display: table; /*** For non-IE browsers ***/
  height: 100%;
  margin-bottom: -30px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
  background: #FFCCCC; /*** Background colour of navigation column now ***/
}
 
#wrapper {
  display: table-cell; /*** For non-IE browsers ***/
  position: relative; /*** Let's be nice to IE ***/
}
 
#outer {
  position: relative;
  margin-left: 200px; /*** Left Column Width ***/
  margin-right: 200px; /*** Right Column Width ***/
  background: #ADD8E6; /*** Background colour of content column ***/
  height: 100%;
}
 
#float-wrap {
  width: 100%;
  float: left;
  display: inline;
}
 
#clearheadercenter {
  height: 90px; /*** TOTAL Height of Header Rows ***/
  overflow: hidden;
}
 
#clearheaderleft {
  height: 90px; /*** TOTAL Height of Header Rows ***/
  overflow: hidden;
}
 
#clearheaderright {
  height: 90px; /*** TOTAL Height of Header Rows ***/
  overflow: hidden;
}
 
#clearfootercenter {
  height: 30px; /*** TOTAL Height of Footer Rows ***/
  overflow: hidden;
}
 
#clearfooterleft {
  height: 30px; /*** TOTAL Height of Footer Rows ***/
 overflow: hidden;
}
 
#clearfooterright {
  height: 30px; /*** TOTAL Height of Footer Rows ***/
  overflow: hidden;
}
 
#center {
  position: relative; /* fix for IE */
  width: 100%;
  float: right;
  height: 100%;
  display: table;
}
 
#left {
  float: left;
  display: inline;
  width: 200px; /*** Left Column Width ***/
  margin-left: -200px; /*** NEGATIVE Left Column Width ***/
  position: relative;
}
 
#right {
  float: left;
  display: inline;
  width: 200px; /*** Right Column Width ***/
  margin-right: -200px; /*** NEGATIVE Right Column Width ***/
  position: relative;
}
 
#footer {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 0;
}
 
#subfooter1 {
  margin: 0;
  background: #FFFFCC;
  text-align: center;
  height: 30px;
  overflow: hidden;
}
 
#header {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
 
#header-inner {
  min-width: 770px; /*** Minimum Content Width ***/
  height: 0;
}
 
#subheader1 {
  margin: 0;
  background: #FFFFCC;
  text-align: center;
  height: 30px;
  overflow: hidden;
}
 
#subheader2 {
  margin: 0;
  background: #FFE7AA;
  text-align: center;
  height: 60px;
  overflow: hidden;
}
 
#centerfill, #leftfill {display: none;}
</style>
 
<!--[if IE 7]>
<style type="text/css" media="all">
 
#fullheightcontainer{ height: auto; min-height: 100%;}
 
#centerfill, #leftfill, #rightfill {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100%;
  background: #ADD8E6;
}
 
#leftfill {
  width: 200px;
  background: #FFCCCC;
}
 
#rightfill {
  left: 100%;
  margin-left: -200px;
  width: 200px;
  background: #FFCCCC;
}
 
</style>
<![endif]-->
</head>
 
<body>
  <div id="fullheightcontainer">
  <div id="centerfill"><!-- Center column color filler for IE7 --></div>
  <div id="leftfill"><!-- Left column color filler for IE7 --></div>
  <div id="rightfill"><!-- Right column color filler for IE7 --></div>
  <div id="wrapper">
  <div id="outer" class="floatcontainer">
  <div id="float-wrap" class="floatcontainer">
  <div id="center">
  <div id="clearheadercenter"></div>
  <div id="container-center">
  <p>Not much going on here!</p>
  </div>
  <div id="clearfootercenter"></div>
  </div>
  <div id="left">
  <div id="clearheaderleft"></div>
  <div id="container-left">
  <p>No links to see!</p>
  </div>
  <div id="clearfooterleft"></div>
  </div>
  </div>
  <div id="right">
  <div id="clearheaderright"></div>
  <div id="container-right">
  <p>Maybe some ads here!</p>
  </div>
  <div id="clearfooterright"></div>
  </div>
  </div>
  </div>
  </div>
  <div id="footer">
  <div id="subfooter1">
  <p>
  This is the Footer Row (with Fixed Height)
  </p>
  </div>
  </div>
  <div id="header">
  <div id="header-inner">
  <div id="subheader1">
  <p>
  This is Header Row #1 (with Fixed Height)
  </p>
  </div>
  <div id="subheader2">
  <p>
  This is Header Row #2 (with Fixed Height)
  </p>
  </div>
  </div>
  </div>
</body>
</html>

What other advantages are there to this layout? Any column filling up will push the footer down AND extend the others. No images are used (but of course you will at some time for your design). Any graphic side borders can be set with the backgrounds as just narrow repeating images, allowing the page width to be flexible. The design can also be made with a fixed width centered in the browser window. You will need an inner div for the footer as well to do this, otherwise all the other divs needed are present.

The content comes first. Good news for search engine crawler bots. With the header last, any navigation bar in it can extend or fly out down without affecting the main content's position. You can set padding to design to give some left and right elbow room, but beware of IE5/6 which will need a different bit of code to do this.

And you thought 100% height would be easy! The ideas and work done on these designs started with designs by Big John from positioniseverything and Paul O'Brien. The layouts and ideas have been tested and hacked about by a lot of users at csscreator, cssdiscuss, and sitepoint forums. They are, as far as I can tell, stable with all the major modern browsers (and some obscure ones too). One note is that Opera has a problem re-calculating page heights when re-sizing a window, and so the footer may not stay at the bottom of the window if the content wouldn't normally fill the window without the 100% height code, but it will still stay at the bottom of the content.

Trevor

Give your site a valid doctype | Uncollapsing Margins

Tags:

How To

Tue, 2007-03-13 12:21

gabi_cavaller

Offline

Regular

Last seen: 13 years 30 weeks ago

Joined: 2007-01-25

Posts: 28

Points: 0

Very helpful. I was fooled

Very helpful. I was fooled to what I thought 100% height was. Thanks.

Very helpful. I was fooled

User login

Navigation