Højde 100% i CSS

Hej
Jeg er ved at lære at bruge CSS til at sætte min side op i istedet for tabeller. Det tager sgu noget tid at finde ud af hvordan det hænger som er mangler stadig lang vej.
Mit problem er at jeg har en boks i midten, 950px bred. Jeg vil gerne have den fylder hele skærmen i højden, 100%. Hvis teksten fylder mere end højde skal den selvfølgelig bare følge med.
Men det er som om den bliver 120% i højden istedet for blot 100% af skærmen. Hvorfor kommer det ekstra tomme fyld i bunden??

Opstillingen er en kasse vandret for oven, og 3 kolonner (kasser neden under den vandrette kasse).
Sig endelig til hvis det er en usmart måde jeg har gjort det på, for jeg er som sagt lige begyndt.

Source kode
<div id="container">
  <div id="top">
  <? include 'top.php';?>
  </div>
   
  <div id="left">
  <? include 'left.php';?>
  </div>
   
  <div id="right">
  <? include 'right.php';?>
  </div>
   
  <div id="content">
  Siden indhold kommer her
  </div>
</div>

Min CCS
#container {
    position: relative;
    width: 950px;
    height:100%;
    padding: 0px 0px 0px 0px; /*top right bottom left*/
    margin: 5px auto 100px auto;
}
#top {
    position: relative;
    width: 950px;
    height: 100px;
    padding: 0px 0px 0px 0px; /*top right bottom left*/
    margin: 0px 0px 0px 0px;
}
#left {
    position: relative;
    float:left;
    width: 150px;
    height:100%;
}
#right {
    position:relative;
    float: right;
    width: 150px;
    height: 100%;
}
#content {
    position:relative;
    height:100%;
}
html,body {
    height: 100%;
}