Footer mit konstanter Höhe

  • Hallo Ihr,

    wie kann ich vermeiden, dass die Höhe des Footers je nach Inhalt einer Seite variiert ? Die Höhe soll unabhängig von der aufgerufenen Seite konstant bleiben. Wenn möglich, sollte die Höhe nicht mit einem Zahlenwert angegeben werden sondern sich dem Inhalt des Footers anpassen.

    maksimilian

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Sorry, aber deine Frage ist mich mich zumindest komisch formuliert.

    Du willst eine gleiche Höhe, egal auf welcher Seite, aber dass ganze ohne fixe Höhenangabe? ;)
    Oder meinst du die Position des Footers? Also dass er am "Boden klebt"? Sticky Footer?

  • Hi rantanplan2000,

    nein, ich meine nicht die Position des Footers sondern nur seine Höhe. Zu meiner „komischen“ Anforderung (mir fehlt leider der passende Fachjargon): Wenn ich eine feste Footer-Höhe angebe (sofern das überhaupt möglich ist), laufe ich Gefahr, einen Teil des Footer-Inhalts abzuschneiden. Man bekommt durch Probieren natürlich heraus, ab welcher Höhe das nicht mehr der Fall ist. Aber ich hätte gerne eine „elegante“ Lösung. Mit welchem Objekt-Namen spreche ich in welcher Datei den Footer denn überhaupt an ?

  • Der Footer sollte sich automatisch dem Inhaltes anpassen. Wenn das nicht passiert, stimmt was am CSS nicht. Hast du einen Link?

    Hast du es mit height: auto; versucht?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Ich sehe da kein Problem. Der Footer bekommt genau die Höhe die der Inhalt braucht. Das restliche Blau unten drunter kommt vom Body-Background.

    Habe ich da was übersehen, oder hast du das Problem bereits lösen können?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Ich sehe da kein Problem. Der Footer bekommt genau die Höhe die der Inhalt braucht. Das restliche Blau unten drunter kommt vom Body-Background.

    Habe ich da was übersehen, oder hast du das Problem bereits lösen können?

    Das Geheimnis des Könnens liegt nicht unbedingt am Wollen ! "Das restliche Blau drunter": Heißt das, dass es kein "sticky" Footer ist ?

  • Ja das heißt es

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Dass du es vielleicht besser nachvollziehen kannst;

    Der rot gekennzeichnete Inhalt ist dein Footer. Der sitzt direkt unter dem "main" Inhalt. Da dein html/body allerdings 100% Höhe verwendet, was ja schon gesagt wurde, streckt sich dein hintergrund eben unter den footer. Der mit Orange "befärbte" Bereich ist ohne Inhalt.

    mal anders gesagt: deine bausteine (main inhalt und footer) haben von naturaus die eigenschaft zu kuscheln. die bausteine rutschen so nahe wie eben möglich aneinander (positon relativ / float:left). wenn also dein main inhalt mehr fläsche bzw höhe beansprucht, rutscht dein footer automatisch nach unten. wenn du die seite auf einem 300px hohen bildschirm angucken würdest, hättest du keinen "blauraum" am ende. die 100% höhe orientierensich am screen.


    Wenn du willst, dass der footer unten klebt, musst du dem die position: absolut; bottom: 0 geben. so wird sich dein footer je nach inhalt auch von innen her anpassen, nur das ganze element sitzt eben dann unten am rand.

    auf der anderen seite wirst du ja sicher mehr inhalt schaffen, dann löst sich das problem von alleine!

    anhang: habe dir einen passenden artikel rausgesucht, da sicher die frage kommt, was du machen kannst:
    http://matthiasschuetz.com/css-sticky-footer

    Einmal editiert, zuletzt von rantanplan2000 (10. Februar 2017 um 00:41)

  • rantanplan2000 #9
    erst einmal danke, dass Du Dir so viel Mühe machst !

    Zum footer.jpg:
    Wie Du das anstellst, dass im Debugger der Footer eine andere Farbe hat als der darunter liegende Bereich, ist mir nicht klar, will ich aber hier aus Platzgründen nicht thematisieren. Schau Dir mal bitte dieses Bild an.

    http://forum.wpde.org/attachment.php…34&d=1486834800


    Ich habe im Customizer die Farbe des Footer Background verändert, und diese Änderung erfasst den gesamten Raum auch unterhalb des Footers. Wie das, wenn der Footer nicht „sticky“ sein soll ?

    Zum Link:
    Schön, dass Du mir da was rausgesucht hast. Mir ist trotzdem nicht klar, wo ich das bei mir einfügen muss. Ich habe mal blauäugig, den Container root (Zeilen 2 bis 8 ) hinter dem body Tag im Template header.php und den CSS-Code div#footer am Ende der style.css eingefügt, was nur den Effekt hat, dass der Code für div#footer als Text am Boden der Homepage erscheint.

    Vielleicht kannst Du mir weiter „auf die Beine“ helfen, würde es aber nicht Übel nehmen, wenn Dir der Aufwand zu groß wird, dem newbie das 1x1 beizubringen.

  • Dein link geht leider nicht.

    Ich müsste später nochmal die Seite genau angucken. Klingt so, als ob sich der Footer-Container auf die 100% Resthöhe streckt, statt der Main. Es gibt eben Vor/-Nachteile mit der Footer-Position.

    Fixiert man den am Boden (fixed), sieht es bei leuten, die eine große Auslösung haben recht doof aus. Zoom mal die Seite als Demo-Zweck ganz weit raus. (Strg gedrückt halten, Mausrad drehen oder in den Optionen (Ansicht) im Browser). Jetzt ist deine Seite ja recht klein - wäre nicht sonderlich "cool" wenn der Footer ein "Fußballfeld" entfernt vom anderen Inhalt steht. Ich denke du weist was ich meine?

    Relative Demo: Setz man die min-height von deinem main-inhalt auf 700px, wenn das dir zu kompliziert ist, schreib einfach 10-20 mal

    Zitat

    Hallo Welt <br/> Hallo Welt <br/>

    in den Bereich deines Hauptfeldes, über dem Footer. DU siehst, der wandert schön nach unten und auch beim Rauszoomen ist er gut plaziert.

    Ansonsten eben absolut - wird dann beim ersten seitenladen an die position gesetzt und ohne js nicht mehr verschoben.

    Wie gesagt, dein aktuelles Problem entsteht nur, weil du kaum Inhalt hast. Aber wie du willst ...

    Es gibt eben positon absolut, fixed und relative. Such dir was aus, werden wir schon schaffen. :D

    Einmal editiert, zuletzt von rantanplan2000 (12. Februar 2017 um 17:34)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!