div über ganze restliche seite

[ky_fr34k]

hallo

ich habe ein <div> das sich über fast die ganze seite ausbreitet also height=98% und widht=98%
darin befindet sich oben ein unter <div> mit der größe width=100% und height=150px;
unten ist ein <div> mit der width=100% und height=50px;
in der Mitte ist ein div mit width=100% und der restliche höhe

<div id="root" style="width: 98%; height: 98%;">
  <div id="oben" style="width: 100%; height: 150px;"></div>
  <div id="mitte" style="width: 100%; height: *px;"></div>
  <div id="unten" style="width: 100%; height: 50px;"></div>
<div>

jetzt hab ich die frage:
wie schaffe ich es das die höhe meines mittleren div genau der Restliche Höhe ist (z.B. 100% -150px - 50px)?

Gruß KY

 

[MasteR ChieF]

Ich würde nicht 3 <div> in einem definieren, das gibt doch ein durcheinander,
du kannst doch 3 einzelne <div> bestimmen und diese dann genau positionieren wie du es möchtest...

Ansonsten kann ich dir nicht weiterhelfen...

LG MAsteR ChieF

 

[ky_fr34k]

stimmt schon aber das äußere <div> lässt einen rahmen mit 1% ringstum platz (kosmetik).
die position ist ja kein problem. des problem ist die höhe, weil die ja bei jedem benutzer anderst ist. ich habe unten und oben eine feste anzahl pixel die ich brauche und in der mitte platz. jetzt sollte ich halt wissen wie viel platz in der mitte ist!
Gruß Ky

 

[HTMLehrling]

das musst du per javascript oder manueller auswahl lösen.
was du könntest wär ein div so wie dein root zu nehmen, ein div normal reinpacken und eins mit position unten ausrichten.
dann währe quasi der teil zwischen den divs der contentbereich, zwar kein div aber platz, also der rest

<div style="height:100%; width:100%; background-color:#00FFFF; position:absolute;">
<div style="height:150px; background-color:#0000FF;"></div>
<div style="height:50px; width:100%; background-color:#FF0000; position:absolute; bottom:0px;"></div>
</div>

dem body auch 100% geben