Bottom fixierter Footer und Ausklappbereich

lagraf · 20. August 2020

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?

lagraf · 20. August 2020

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"

basti1012 · 20. August 2020

Man müßte das mal in live sehen um dir mehr sagen zu können.

Aber was mit absolute und relative zum auf und zuklappen zu zwingen ist meiner Meinung nach der falsche Weg.

tk1234 · 20. August 2020

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.

lagraf · 23. August 2020

Unter http://rachbauer.org/test/Visage-white/test_search.html gibt es ein Testbeispiel.

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

tk1234 · 23. August 2020

Zitat von lagraf

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

Sempervivum · 23. August 2020

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.

lagraf · 23. August 2020

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.

Sempervivum · 23. August 2020

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:

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo Footer mit expandiertem Inhalt</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            min-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        header {
            flex: 0 0 15vh;
            background-color: lightgray;
        }

        footer {
            margin-top: auto;
            flex: 0 0 2em;
            background-color: lightgray;
        }

        main section {
            height: 0;
            overflow: hidden;
            background-color: lightblue;
        }

        input {
            display: none;
        }

        input:checked~section {
            /* Nur zur Demo, damit das Element genügend groß ist*/
            height: 120vh;
        }
    </style>
</head>

<body>
    <header>
        Kopfzeile
    </header>
    <main>
        <h1>Dies ist die Überschrift</h1>
        <label for="input-expand">Klicken zum Aufklappen</label>
        <input type="checkbox" id="input-expand">
        <section>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero
            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem
            ipsum
            dolor sit amet.
        </section>
    </main>
    <footer>
        Fußzeile
    </footer>
</body>

</html>

Alles anzeigen

lagraf · 24. August 2020

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?

tk1234 · 24. August 2020

Zitat von lagraf

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.

Bottom fixierter Footer und Ausklappbereich

Jetzt mitmachen!

Teilen

Tags