CSS & JavaScript

(Dette er et kombineret CSS/Javascript-spørgsmål, og på grund af CSS-indholdet, placerer jeg det også i denne kategori)

Jeg sidder og roder med en hjemmeside, der er delt op i tre vandrette DIV's. De har følgende ID's: #top, #main og #bottom.
De er placeret i dokumentet ved hjælp af følgende kode:
#top{
    position:absolute;
    top:0px;
    clear:both;
    height:130px;
    width:100%;
}
#main{
    position:absolute;
    top:140px;
    clear:both;
    overflow:auto;
}
#bottom{
    position:absolute;
    bottom:0px;
    clear:both;
    height:50px;
    width:100%;
}

Problemet er bare, at hvis der er overflow i #main, så bliver det tilgængeligt via rullegardiner, men #main-DIV'en ligger sig under #bottom-DIV'en.

Selve mit spørgsmål går derfor på:

***Hvordan sætter jeg højden på #main-DIV'en den tilgængelige skærmstørrelse (availHeight) minus 180px? Eller helst som den del af dokumentets højde (innerHeight) minus 180px?

<!--
Mvh mr-bambi aka
Bjørn Amdi Sloth
-->