CSS für Header und Footer

[Standarduser]

Hallo zusammen,

da ich gerade eine Lösung gefunden habe, und sicher auch andere daran Interesse haben, nachfolgende Problemstellung mit Lösung dazu:

Ich verwende in meinem Layout einen Header mit Slideout-Menü, über das Seiten aufgerufen werden, die dann einen Footer mit einem Menü für Unterseiten mitbringen.
Baue ich das einfach so ein, ist die Seite auf einmal scrollbar, obwohl sie wenig Inhalt hat, und der Footer rutscht beim Scrollen nach oben (-> Screenshot).

Warum das Scrollen überhaupt entsteht, ist eigentlich auch klar. "main" wird auf eine Höhe von 100% gebracht und 55px (=Höhe des Headers) nach unten geschoben. Deshalb ist die Gesamtgröße eben größer als das Fenster.

Um das zu unterbinden, habe ich mein CSS wie folgt erweitert:

Code Auswählen Erweitern


/* Main nur so groß, wie nötig */
main#panel.slideout-panel {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
}

/* Footer unten festhalten */
footer {
position: fixed;
}


Verwendet man auf allen Inhaltsseiten einen Footer, empfiehlt es sich außerdem, dem Main-Panel noch ein Abstand-Unten mitzugeben.

Code Auswählen Erweitern

main#panel.slideout-panel {
margin-bottom: 67px;
}

(Die 67px entsprechen bei mir der Höhe des Footers)

Macht man dies nicht, ist unter Umständen auf den Seiten mit Footer die unterste Zeile von Gridster-Elementen nicht sichtbar, wenn man soviel auf eine Seite packt, dass man scrollen muss. Diese Zeile versteckt sich dann hinterm Footer.
Baut man den Abstand-Unten ein, dann haben auch die Seiten ohne Footer den Abstand unten und sind bei voller Ausnutzung der Höhe ebenfalls scrollbar, obwohl unten eigentlich nix mehr kommt. Ein Kompromiss könnte vielleicht sein, dass man auf Seiten mit Footer unten nochmal ein DIV in Footer-Höhe anhängt.
Bei mir sollen eigentlich alle Seiten einen Footer bekommen. Insofern habe ich dieses Problem nicht.

Freut mich, wenn jemand danach gesucht hat. Falls nicht, einfach ignorieren 

[jemu75]

Supi! Vielen Dank für den Hinweis. Habe meine css jetzt nach deinem Vorschlag verändert und endlich sind die lästigen Scrollbalken weg. 

[Ulm32b]

Hallo zusammen,

da ich gerade eine Lösung gefunden habe, und sicher auch andere daran Interesse haben, nachfolgende Problemstellung mit Lösung dazu:
[...]
Freut mich, wenn jemand danach gesucht hat. Falls nicht, einfach ignorieren 

Ich habe das Slideout noch nicht ausprobiert, klingt aber interessant.
Wäre es nicht sinnvoll, dieses Beispiel etwas aufzubohren und dann in die Doku aufzunehmen? FTUI_Widget_Slideout ist, wie ich gerade sehe, noch offen.