Moin,
JQuery (und auch andere Tools, wie z.B. mooTools) sind fuer solche Dinge normalerweise ein bisschen overkill. Man muss aber ganz ehrlich sagen, dass die ganze Sache ziemlich stinkt.
Erstens ist es ne sehr dumme Idee, im
DOM rumzupfuschen, bevor dieser fertig gebaut ist. Da kommen die oben genannten Tools aber zum Einsatz: diese definieren ein domready-Event, welches erst feuert, sobald der
DOM vollstaendig geladen und aufgebaut ist. Vorher solltest du nichts machen.
Zweitens setzt du im onResize immer wieder den Event-Handler fuer Resize neu. Ist auch nicht die tolle Art, was zu machen.
Drittens kannst du einer Box sehr wohl die height:100% - 40px geben. Du musst einfach nur bisserl was ueber absolute Positionierung wissen. Nehmen wir folgenden Code:
Code:
<
html>
<body>
<div id="full">
Hier ist alles drin
</div>
<div id="bottom">
Hier nur bisserl was
</div>
</body>
</
html>
Diese Box ist zwar so breit wie die Seite (liegt daran dass div ein Block-Element ist), aber noch nicht ganz so hoch. Hier kommt nun absolute Positionierung ins Spiel. Die Hintergrundfarbe ist nur zum Demonstrieren des Aufbaus da, sonst nichts.
Code:
#full {
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 40px;
}
So, was machen diese Anweisungen. Wenn ich ein Element absolut positioniere, wird es aus dem Elementenfluss rausgenommen. Die Position richtet sich dann
relativ zum naechsthoeheren,
nicht static positionierten Element. In diesem Fall ist das unser body. Wenn ich nun left und right definiere, definiere ich damit die Position des Randes zum entsprechenden Rand des Elternelements. Die Breite errechnet sich der Browser dabei automatisch. Genauso funktioniert es mit top und bottom. In diesem Fall soll es ueberall am Rand kleben, ausser unten wo wir 40px Platz lassen. Ja, aber wo ist das zweite div? Da wo es laut dem Elementenfluss hingehoert: an der Position 0,0 - schliesslich ist das absolut positionierte Element rausgerissen. Nun muessen wir auch #bottom stylen:
Code:
#bottom {
background-color:green;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 40px;
}
Hier machen wir im Grunde genommen dasselbe, aber wir definieren nicht mehr top und bottom, sondern nur bottom. Damit sagen wir dem Browser, dass er das Element unten ausrichten soll. Tm naechsten Schritt sagen wir dann, dass es auch noch eine Hoehe haben soll, naemlich die 40px, die wir in #full weggelassen haben. Das Ergebnis ist....naja, probiers mal aus
BTW, das Ganze funktioniert natuerlich nur in einem Browser, der CSS2 korrekt interpretiert. IE6 hab ich grad net zum Testen hier, aber Firefox 3 und IE7 machens korrekt - wenn die Seite im Standards Mode laeuft. Im Quirksmode kannst du das natuerlich knicken. Und wenns im IE6 nicht tut: fuck it, den sollte man eh nicht hernehmen. Wenns auch im IE6 funktionieren soll: nimm das
IE7-Script um dir Probleme zu ersparen.
Spiel einfach damit rum - die Moeglichkeiten sind fast grenzenlos. Beachte aber, dass du saemtliche Margins, Paddings und Border mit dazurechnen musst. Wenn die beiden divs jetzt noch einen Rahmen von 1px erhalten sollen, musst du das natuerlich beachten, da sich die Boxen sonst ueberschneiden. Das findest du aber noch selbst raus
Achso, und bevor ichs vergesse: wenn du dem #full-div dann noch overflow-scroll gibst und viiiieeeeel Text reinwirfst...naja, sieh selbst
Greetz
alcaeus