Dreireihiges, tabellenloses CSS-Layout mit mittlerer Zeile, das den verbleibenden Platz ausfüllt

8

Was ich brauche, ist ein div mit pixelbasierter Höhe, die 3 Zeilen enthält. Die obere Reihe hat je nach Inhalt eine variable Höhe. Die untere Reihe hat eine feste Höhe. Die mittlere Zeile füllt den verbleibenden Platz. Alles ist Breite 100%.

Ich habe schon seit Stunden damit zu kämpfen, ein div- und CSS-basiertes Layout zu erstellen, für das ich buchstäblich Sekunden brauche, um eine Tabelle zu verwenden. Ich habe viele Ansätze versucht, darunter negative untere Ränder, verschachtelte Divs, verschiedene Positionierungen, Höheneinstellungen, Anzeige: Tabelle, nichts bringt mich, was ich brauche. Ich habe diese Seite und das Internet durchsucht, habe meine Erinnerung an die verschiedenen Ansätze für flüssige Layouts aufgefrischt. Kein Erfolg.

Ich bin nicht besonders besorgt über die Kompatibilität mit "alten" Browsern wie IE6 (diese App ist nicht für "öffentliche" Nutzung). Es wäre großartig, dies in IE8 + FF + Chrome zum Laufen zu bringen.

Ich habe das Problem auf ein bloßes, unten aufgeführtes Beispiel reduziert, zusammen mit dem tabellenbasierten Layout, das zeigt, was ich will. Anmerkung: Ich mag CSS und tabellenloses Layout, aber manchmal scheint es einfach lächerlich, wie lange wir arbeiten müssen, damit es funktioniert.

%Vor%

Inzwischen konnte ich das nicht aufhören lassen, habe schon zu viel Zeit verbracht. Ich gehe mit dem Tabellenlayout in meinem Projekt voran. Es ist einfach und erfüllt die Anforderungen, auch wenn die Puristen irgendwo heulen.

Vielen Dank für irgendwelche Vorschläge - Ich bin hauptsächlich neugierig, was die "richtige" Lösung zu diesem Zeitpunkt ist, ich hasse es, ratlos zu sein. Sicher, es ist machbar?

    
Joe Tan 09.11.2009, 20:14
quelle

1 Antwort

6

Der Schlüssel zu Ihrem Problem ist, das Problem anders zu betrachten - wenn Sie Google "sticky footer" verwenden, finden Sie Lösungen wie die folgenden:

%Vor%

BEARBEITEN: da sollte das was mehr oder weniger gewünscht sein.

    
Walter Mundt 09.11.2009 20:21
quelle

Tags und Links