den dér med variabel højde igen

<css>
html,body{height:100%;margin:0px;padding:0px;background:#666666;}

#baggrund{position:relative;width:713px;height:100%;background:white;background-image: url('../images/bg.gif');z-index:0;}
#banner{height:61px;width:713px;background:#E9D1A2;}
#buttons{height:22px;width:713px;background-image: url('../images/header_button.gif');}
#subnav{height:22px;width:713px;background-image: url('../images/header_subnav.gif');}
#main{height:100%;width:713px;}
#bot1{height:22px;width:713px;;background-image: url('../images/header_button.gif');}
#footer{height:100px;width:713px;background:#000000;}
</css>

Min side skulle gerne være sådan at main er variabelt tilpasset browservinduet, men i stedet er siden 100% i main PLUS de andre div's og så er der scroll, selv om der ikke er noget indhold..

Hvad gør jeg galt ?