Bottom fixierter Footer und Ausklappbereich

  • Ich habe eine ziemlich kurze Suchseite, wo defaultmäßig nur nach einem Wert gesucht werden soll. Deshalb fixiere ich den Footer ganz unten am Bildschirmrand:

    Code
    * { margin: 0; padding: 0; }
        html, body { height: 100vh; }
        #site-content { position: relative; min-height: 100%; }
        .site-footer { position: absolute; bottom: 0; width: 100%; }

    Allerdings gibt es auf der Seite einen JS+jQuery Ausklappbereich, der detailiertere Suchmöglichkeiten aufklappt und dadurch die Seite vergrößert. Dadurch rutscht der untere Teil der Seite aber unter den Footer hinein. Was kann man machen, damit der Footer beim Ausklappen nach unten rutscht, sodaß die volle Seite gesehen wird?

  • Ich hab was gefunden, weiß aber nicht, ob das die beste Lösung ist:)

    Ich ändere beim Auf- und Zuklappen des Aufklappbereiches per Javascript die Eigenschaft von .site-footer, funktionieren tut's auf jeden Fall!

    Code
    // Beim Aufklappen
    document.querySelector(".site-footer").style.position = "relative"
    // Beim Zuklappen
    document.querySelector(".site-footer").style.position = "absolute"
  • Du solltest die Finger von der position-Eigenschaft lassen, die macht gerne mal Ärger bzw. hat Nebenwirkungen. Verwende für das Layout grid bzw. flexbox. Und: bei CSS-Fragen solltest du immer auch das entsprechende (ggf. gekürzte) HTML mit posten.

  • Das Problem beim Aufklappen ist, dass unten immer ein schwarzer Bereich übrigbleibt.

    Der schwarze Bereich kommt von html - dem Element hast du aus irgendeinem Grund einen schwarzen Hintergrund und eine weiße Schriftfarbe spendiert.


    Außerdem:

    • Finger weg von position:absolute/relative, verwende (wie oben schon gesagt) grid oder flexbox
    • die Textfelder sind bei mir nur schlecht als solche zu erkennen
    • lass den reset-Button weg, er ist überflüssig - und ärgerlich wenn man versehentlich darauf kommt
    • lass die Layouttabelle beim Geschlecht weg
    • label-Elemente fehlen (zumindest funktionierende)
    • bei Haar- und Augenfarbe fehlt "alle" o.ä.
    • wenn du schon lange Erklärungen zur Bedienung schreiben musst (Cup-Feld) dann ist es schlecht bedienbar. Verwende eine Liste mit Checkboxen. Und: auf mobilen Geräten bekommt der User beim Klick auf das Select automatisch eine Liste von Checkboxen und kann die gewünschten auswählen
    • vergiss Pixel als Einheit, sowohl als Breakpoint (in media-Querys) als auch als Schriftgröße sind sie ungeeignet
    • wenn das Formular auf die gleiche Seite zeigen soll lass das action-Attribut einfach weg
    • die font-awesome.min.css ist falsch eingebunden
    • keine inline-Stylesheets, schreibe sämtliches CSS in die externe CSS-Datei
    • es gibt keinen Grund Umlaute zu verstümmeln
    • ein g-Element gibt es nicht
  • Was mir noch auffällt: Wie so häufig eine Inflation von div-Containern. header ist ok, aber warum müssen da noch zwei divs drin sein? Ebenso beim main. Kein Wunder wenn man da beim Styling die Übersicht verliert.

  • Hallo tk1234, hallo Sempervivum,

    die Seite ist nur als Layout gedacht, damit der Kunde sieht wie die Oberfläche aussehen kann. Daher ist alles HTML, CSS, etc nur dazu da, dass das Layout dargestellt wird, mehr nicht. Die Darstellung wurde inzwischen schon zig-Mal geändert, begonnen hat alles mal mit einer schwarzen Page. Daher ist irgendwo im CSS File auch noch der schwarze Hintergrund beim Aufklappen übrig geblieben, habe ich inzwischen schon korrigiert. Sollte sich der Kunde doch mal entscheiden dass er eine neue Page haben will, dann beginnt ein Aufbau von Null komplett neu, nur die Optik wird übernommen!


    Und um der nächsten Frage vorzubeugen: Warum tue ich mir den Aufwand an, das Layout solange umzubauen, bis es dem Kunden vielleicht gefällt: Ich muß nicht davon leben, beziehe mein Geld von woanders und nehme das zum Lernen und Üben her.


    Trotzdem danke für die Einwände, sollte es was werden, werde ich sie berücksichtigen, auch wenn ich die meisten davon sowieso von selber vorgehabt hätte oder sich manche bei einer Echt- statt einer Dummyseite gar nicht stellen würden.:)

  • Um nicht nur Einwände zu liefern sondern auch eine Lösung habe ich mal eine Demo gemacht mit einem Footer, der unten am Seitenrand liegt und nach unten weg geht, wenn der Inhalt darüber expandiert wird. Wie man sieht, ganz ohne absolute Positionierung:

  • Hallo Sempervivum,

    danke für das Beispiel, habe ich mir angesehen! Sollte es zum Auftrag kommen werde ich es berücksichtigen.


    Frage zu flex: Ich habe gelesen dass IE 10 und davor dieses Modell nicht unterstützen, dass es aber Möglichkeiten gibt, die Darstellung mehr oder weniger auch darauf hinzubekommen. Soll man diese älteren Browser überhaupt noch unterstützen?

  • AaFrage zu flex: Ich habe gelesen dass IE 10 und davor dieses Modell nicht unterstützen, dass es aber Möglichkeiten gibt, die Darstellung mehr oder weniger auch darauf hinzubekommen. Soll man diese älteren Browser überhaupt noch unterstützen?

    Nein.

Jetzt mitmachen!

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