Layout-Frage zu seitenfüllender Flexbox

[Rolf B]

Hallo,

ich habe eine Webseite, bei der ich Header und Nav oben, den Footer unten fixieren will. Dazwischen den Main-Bereich flexibel. Das geht mit Flexbox. Ok.

Header, Footer und Nav sollen die Fensterbreite ausfüllen. Der Main-Bereich vom Background her auch, aber die darin angezeigten Daten sollen nicht zu breit werden. Daher befindet sich darin eine section mit max-width und margin: 0 auto.

Diese Section hat wiederum einen Titel, dann eine Tabelle mit Dokumentverweisen und einen Footer.

Ich möchte:

• den Dokumente-Titel und den Dokumente-Footer ständig sichtbar haben
• die Dokumentliste bei Bedarf scrollen
• den Dokumente-Footer bündig am Ende der Dokumentliste haben. Er soll nicht am Page-Footer kleben
• eine CSS Lösung ohne JavaScript.

Und das kriege ich nicht hin. Ich habe es mit zwei geschachtelten Flexboxen gelöst, d.h. der Body ist die äußere Flexbox und die main section die innere Flexbox. Ich muss der inneren Flexbox eine fixe Höhe geben; wenn ich dort auto setze, bleibt der Body nicht auf 100vh begrenzt.

Hier ist eine abstrahierte Spielwiese dazu. Das meiste klappt, nur der Dokumente-Footer (Part 3) bleibt unten kleben. Kriegt man das hin? Kriegt man das so hin, dass es auch ein IE11 versteht?

Rolf

[beatovich]

hallo

Hier ist eine abstrahierte Spielwiese dazu. Das meiste klappt, nur der Dokumente-Footer (Part 3) bleibt unten kleben. Kriegt man das hin? Kriegt man das so hin, dass es auch ein IE11 versteht?

Wenn die Section ganz sichtbar aber scrollbar sein soll, dann ist deren max-height: calc(100vh - [header height] - [footer height] );

[Matthias Apsel]

Hallo beatovich,

Wenn die Section ganz sichtbar aber scrollbar sein soll, dann ist deren max-height: calc(100vh - [header height] - [footer height] );

Leider sind die Höhen nicht bekannt.

Bis demnächst
Matthias

[beatovich]

hallo

Hallo beatovich,

Wenn die Section ganz sichtbar aber scrollbar sein soll, dann ist deren max-height: calc(100vh - [header height] - [footer height] );

Leider sind die Höhen nicht bekannt.

Dann soll man auch nicht Inhalte im Viewport einsperren wollen.

Ich leiste mir nur bei pre-feldern eine max-height, und auch nur deshalb, weil man eventuell den horizontalen Scrollbalken brauchen könnte.

[Rolf B]

Hallo beatovich,

Dann soll man auch nicht Inhalte im Viewport einsperren wollen.

Doch, will ich, weil in den genannten Bereichen Bedienelemente sind.

Mit der Einschränkung, dass der Dokumente-Footer nicht an die Dokumente heranrückt, klappt ja alles. Ich könnte die Bedienelemente in den Headerbereich verlegen. Aber dann ändert sich das grundsätzliche Look+Feel der Seite, und das möchte ich vermeiden (die Vorversion, mit Table-Layout und jeder Menge technischem Dreck, läuft seit 2006).

Letztlich habe ich

MAIN
   DOK-HEADER
   DOK-ENTRY
   DOK-ENTRY
   DOK-ENTRY
   DOK-FOOTER
   :
FOOTER

und der DOK-ENTRY Bereich muss eine inhaltsbasierende Höhe haben, so dass der Footer heranrutscht wenn "zu wenige" Dokumente da sind. Mit JavaScript ließe sich da sicherlich was hexen, das möchte ich aber vermeiden.

Rolf

[Gunnar Bittersmann]

@@Rolf B

ich habe eine Webseite, bei der ich Header und Nav oben, den Footer unten fixieren will. Dazwischen den Main-Bereich flexibel. Das geht mit Flexbox.

Mit Grid wohl besser …

Header, Footer und Nav sollen die Fensterbreite ausfüllen. Der Main-Bereich vom Background her auch, aber die darin angezeigten Daten sollen nicht zu breit werden. Daher befindet sich darin eine section mit max-width und margin: 0 auto.

… dann brauchst du kein zusätzliches Element. ☞ Beispiel

section wäre hier wohl auch nicht angebracht; der ganze Hauptinhalt ist kein Abschnitt. Manchmal ist ein div einfach nur ein div.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Mit Grid wohl besser … dann brauchst du kein zusätzliches Element. ☞ Beispiel

Mit Flexbox auch nicht. ☞ Guckst du.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

ah, danke. Die doppelte Flexbox hatte mich ohnehin genervt.

Aber mein Ziel habe ich immer noch nicht erreicht.

Wenn ich es jetzt so mache, bekommt die Tabelle keinen Scrollbar, wenn die Höhe zu gering wird. Auch ein flex: 1 1 10px; am main Element hilft nicht; es wird einfach nicht geschrumpft. Gebe ich dem main-Element ein overflow:scroll, findet Schrumpfung statt, aber ich will den Scrollbar ja nicht am Main-Element, sondern an der Table haben.

Rolf