height 100% funktioniert unter IE8 und FF3.6 nicht

[ThomasG]

Hallo,

wer kann mir bitte helfen?
Ich habe ein neues 3-Spalten Layout mit Header und Footer erstellt, bei dem die CSS-Anweisung height: 100% nicht im IE8 und FF3.6 funktioniert, jedoch im IE6 schon. Nehme ich statt Prozent Pixel klappt es, aber ich will dieses Layout dynamisch gestalten und deshalb benötige ich eben diese Prozentangabe. Gibt es irgendeine CSS-Anweisung hierfür mit der man dieses Problem umgehen kann, oder ist mir ein Fehler unterlaufen den ich bislang nicht erkannt habe? Im Gegensatz hierzu funktioniert die CSS-Anweisung width: 100% z.B. im Header und Footer bei mir wie gewünscht. Code habe ich im Anhang beigefügt.
Für hilfreiche Hinweise wäre ich sehr dankbar

Gruß
Thomas

HTML

<div id="wrapper">
  <div id="header">Header</div>
  <div id="left">Linke Spalte</div>
  <div id="content">Content</div>
  <div id="right">Rechte Spalte</div>
</div>
<div id="footer">Footer</div>

CSS

* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
font-family: Verdana, Georgia, Helvetica, Arial, sans-serif, "Times Roman";
background-color: #600;
color:  #000;
}
img {
border: none;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -60px 0;
background: #e0d0b0;
color: #000;
}
#header {
width: 100%;
height: 161px;
background: #600;
color: #fff;
}
#left {
float: left;
height: 100%;
width: 203px;
background: #09F;
}
#right {
float: right;
height: 100%;
width: 183px;
background: #069;
}
#content {
float: left;
}
#footer {
clear: both;
height: 60px;
width: 100%;
background: #003f00;
color: #fff;
}