div box top 50px bottom 50px

[tomix]

hallo zusammen

wahrscheinlich schon 100mal diskutiert aber ich finde trotzdem keine lösung die funktioniert.
ich möchte folgendes machen:
3 div boxen:

• die oberste ist eine art kopfzeile (sagen wir mal 50px hoch)
• die mittlere ist der eigentliche inhalt
• die unterste ist eine art fusszeile (sagen wir auch 50px hoch).
  die mittlere sollte sich nun von der oberen bis zur unteren erstrecken und falls
  der inhalt zu gross wird eine scrollleiste anbieten.
  ich kriege aber keine box hin die von top:50px bis bottom:50px geht.
  top und bottom ist okay (mal abgesehen davon das hidden nicht geht)
  mit frames wäre es ja so einfach (aber ich will keine).

gruss
thomas

ps: nur mit mozilla 1.4 getestet.

css:
body, html {
height:100%;
}

.top {
height:50px;
width:100%;
overflow:hidden /* überlauf abschneiden, geht nicht */
border-bottom-width:16px;
border-style:solid;
border-color:#D50006;
}

.middle {
width:100%;
position:absolute;
top:50px
bottom:50px;
overflow:scroll; /*scroll;  auto;  */
border:thin;
}

.bottom {
height:50px;
width:100%;
position:absolute; /* unten positionieren */
bottom:0px;
border-top-width:16px;
border-style:solid;
border-color:#D50006;
}