• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sticky Footer

T

Tronjer

Senior HTML'ler
Ich suche gerade nach einer Möglichkeit, für Mobilgeräte mit unterschiedlichen Auflösungen den Footer am unteren Rand des Viewport zu verankern. Im vorliegenden Fall ist es leider nicht möglich, per CSS die Elemente body und html zu adressieren und diesen eine height von 100% zuzuweisen. Außerdem würde ich hier gerne ohne position: absolute und den Einsatz von JavaScript auskommen. Also pures CSS.

Ist so etwas möglich?
 
Werbung:
wieso nimmst du nicht zwei divs, im einen den Content und im anderen der Footer. Und dann weist du dem einen z.B. 70% height zu, dem anderen 30%.
Würdest du position:absolute verwenden (ich schätze dazu zählt auch position:relative, fixed) könntest du natürlich per bottom den Footer immer gleich hoch darstellen.
Sonst wüsste ich auch nichts..
 
Werbung:
So einfach ist es leider nicht.

Ich erstelle momentan einige mobile pages für ein Webportal mit etlichen Seiten, die sich alle dasselbe Styling teilen. Auf HTML-Basis betrachtet, schreibe ich dabei lediglich einige Views in Ruby for Rails für den Content, ohne dabei direkten Zugriff auf den Footer (oder die Tags body und html) zu haben. Hinsichtlich CSS wird für jede Unterseite ein .less file erstellt, die dann alle zu einer einzigen großen CSS-Datei kompiliert werden. Also bleibt mir quasi nur eine Art CSS-Namespace für den Main-Container:

Code: 
#mobile-page {
    #box (
        .....
    )
    ........
}

Die klassische Sticky-Footer-Methode kann ich hier nicht anwenden, und außer JavaScript fällt mir nichts ein, um den nicht-zugänglichen Footer zu adressieren. Ich würde das aber, falls möglich, lieber mit CSS lösen.
 
Zuletzt bearbeitet:
Irgendwie erschließt sich mir grade nicht, warum du den Footer nicht über CSS adressieren kannst. Was spräche denn in diesem Fall gegen eine absolute Positionierung?
 
Werbung:
Banana_Jones schrieb:
Irgendwie erschließt sich mir grade nicht, warum du den Footer nicht über CSS adressieren kannst. Was spräche denn in diesem Fall gegen eine absolute Positionierung?
Zum Vergrößern anklicken....

Was gegen die direkte Adressierung spricht ist, dass ich Nested Rules innnerhalb einer Less-Datei erstelle, die mit vielen anderen zu einer einzigen großen CSS-Datei kompiliert wird, welche wiederum für das gesamte Webportal gilt. Der Footer ließe sich damit sogar separat adressieren, aber sofern ich Anweisungen für das <body> und <html>-Tag festlege, könnte das die Darstellung auf anderen Unterseiten zerschießen. Innerhalb meiner Views kann ich auch lediglich HTML für den Maincontent schreiben, auf Navigation und Footer habe ich keinen Zugriff. Wer von euch mit Zend Framework oder Rails arbeitet, kennt so etwas wahrscheinlich.

Was grundsätzlich gegen position: absolute spricht ist, dass das Layout auf dem fluiden Grid von Twitter Bootstrap aufbaut. Absolute Positionierung verursacht da meist Probleme, und deshalb versuche ich das nach Möglichkeit zu vermeiden.

Der Anlass meines Postings wiederum ist nicht, dass mir keine Lösung dazu einfallen würde, mit jQuery wäre das ganz einfach:

Pseudocode
Code: 
// Falls ein bestimmtes Element auf der Seite existiert
if (element) {
    $('body, html').css('height', '100%');
    $('#footer').addClass('foo');
}

Ich dachte nur, dass jemand vielleicht einen reinen CSS-Ansatz unter Berücksichtigung der bestehenden Einschränkungen kennen würde. Ab und zu lerne ich ja doch noch etwas über CSS hinzu.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben