[WinstonSmith]

Hallo Forengemeinde,

ich stehe vor folgender Aufgabe und hoffe auf eine Menge Tipps und Tricks euerseits, um diese zu lösen.

Auf einer Website die ich entwickle gibt es grundsätzlich drei vertikal angeordnete Bereiche, die als DIV-Container vorliegen und formatiert sind.

DIV 1:
- Ganz oben
- Feste Höhe (!)
- Ein büschen Inhalt nebst Navigation, aber nix wildes

... darunter ...

DIV 2:
- Mittig
- Keine feste Höhe (!)
- Halt der Inhalt

... darunter ...

DIV3:
- Unten
- Keine feste Höhe (!)
- Zusätzliche Seitenoptionen

Ich habe euch mal eine zeichnung gemacht:




Aufgabe ist es, das DIV 3 (unten) immer (!) am unteren Seitenrand zu haben und das DIV 2 (mitte; content) entsprechend in der Höhe anzupassen und den Inhalt dieses Containers mittels overflow:auto zu scrollen.

Oder mit anderen Worten:

1.) Der Header steht fest in der Höhe.
2.) Der Footer passt sich in der Höhe dynamisch dem Inhalt an.
3.) Der Content muss sich entsprechend ebenfalls in der Höhe anpassen.

Die Anordnungen selbst habe ich ohne weiteres mittels position:relative, bzw. absolute (mit bottom:0px;) hinbekommen, allerdings habe ich aufgrund dieser Vorgehensweise das Problem das ...

a) wenn der Content zu groß ist, er (ohne overflow:auto und fester Höhe) unterhalb des Footers einfach weitergeht, oder ...
b) wenn ich dies mittels overflow:auto anpasse, ich eine feste Höhe vergeben muss, was ich aufgrund verschiedener Auflösungen eigentlich nicht möchte.

Ist das soweit verständlich?

Jetzt werden vielleicht Tipps in der Richtung "mach doch einfach unter den Content den Footer und gut is'?!" kommen, welche ich mit "Sieht aber nicht schön aus und bei zu kleinem Content erst recht" zurückschicken möchte.

Ausserdem soll die Seite selbst nicht scrollbar sein, sondern lediglich der Inhalt.

Wie ich das ganze machen könnte, wenn der Footer eine feste Höhe hat, weiß ich bereits (...;margin: -150px;...), allerdings nicht, wie es dynamisch gehen könnte.

Bin mal gespannt auf eure Tricks

Gruß,
Winston

[WinstonSmith]

Hab hierzu noch was gefunden: http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=70
(Etwas runter scrollen zum Artikel über "Zeitungsähnliche Designs")

Darin wird der Tipp gegeben, solch ein DIV mittels JavaScript in der Höhe anzupassen, wenn die Seite geladen wird.

Das kann's doch nicht sein, oder?

Leute, lasst und beweisen, dass es BESSER geht!

[tacker]

[WinstonSmith]

Das befürchte ich mittlerweile auch, dass es nur geht, wenn man die Höhe des unteren DIVs kennt. Dann kann man mittels border-bottom: 150px; und entsprechendem margin:-150px; rum frickeln und kommt zum Ergebnis.

Vielleicht bastel ich mir auch ein JavaScript zusammen. Blöd nur, dass die Browser unterschiedliche Eigenschaften des Window-Objects zur Ausgabe der Fenstergröße benutzen. Ich mag solche Tricks nicht.

Übrigens: ich werde in zukunft edit verwenden!

[tacker]

[WinstonSmith]

Hey, sehr gute Seite und die xLibrary scheint mir eine runde Angelegenheit zu sein! Danke.

Aber auf Anhieb habe ich kein Objekt gefunden, mit dem ich das onResize-Event ordentlich (!) abfragen kann. Im Internet habe ich auch nichts brauchbares dazu gefunden, denn entweder der firefox, oder der IE wollen nicht die ganze Zeit mitspielen.

Den Rest habe ich bereits zurechtprogrammiert (: alle relevanten Höhen aufsummieren und diese Summe von der Seiteninhaltshöhe abziehen um auf die Höhe des Contentdivs zu kommen (vom Prinzip) ), ich brauche lediglich ein Script, welches die Seite reloadet wenn es resized wird. Bin für Tipps natürlich offen

Danke und Gruß,
winston

[tacker]

Hier hat er ein Beispiel, was den resize des Fensters abfängt:
http://www.cross-browser.com/x/examples/floater_bar.php

[WinstonSmith]

Dank dir.

Werde es mir heute Abend mal in Ruhe zu Gemüte führen weil ich gerade meine Entwicklungsuumgebung nicht vor mir habe.