Christian Huml: Footer ohne Scrolling

Guten Tag zusammen,

wie bekomme ich es hin Codepen dass der Footer nur die Höhe ausfüllt (ohne Scrolling).

Ist dieses Beispiel veraltet? Beispiellayout: 100% Höhe mit Footer.

Mit freundlichen Grüßen

Christian Huml

akzeptierte Antworten

  1. hallo

    Guten Tag zusammen,

    wie bekomme ich es hin Codepen dass der Footer nur die Höhe ausfüllt (ohne Scrolling).

       body{ display:flex; flex-direction:column; }
       footer{flex: 1 1 auto;}
    
    1. @beatovich

      Hatte ich auch schon versucht, scheint nicht zu greifen. Codepen

      Hängt dies eventuell mit Grid zusammen?

      Mit freundlichen Grüßen

      Christian Huml

      1. hallo

        @beatovich

        Hatte ich auch schon versucht, scheint nicht zu greifen. Codepen

        klar, weil du die angabe:

        html, body {height:100%}
        

        entfernt hast!

        1. klar, weil du die angabe:

          html, body {height:100%}
          

          entfernt hast!

          @beatovich

          Stimmt da habe ich wieder nicht mitgedacht 😂

          Mit freundlichen Grüßen

          Christian Huml

  2. Hallo Christian,

    du musst es noch etwas erweitern.

    • Du brauchst einen Flex-Container mit flex-direction:column. Soweit, so gut.
    • Der Footer soll fixed sein. D.h. nicht wachsen, nicht schrumpfen, und optimalerweise so hoch sein wie es der Inhalt erfordert. -→ flex: 0 0 auto. Die erste 0 ist der Anteil an erforderlichen Höhenvergrößerungen (flex-grow), die zweite 0 der Anteil an Höhenverringerungen (flex-shrink), das auto die Basisgröße (flex-basis). Wenn Du "Luft" um den Text im Footer brauchst, füge Padding hinzu.
    • Der Main-Teil soll den Rest der Seite ausfüllen. Er soll, wenn nötig wachsen. Vielleicht soll er auch, wenn das Fenster zu niedrig wird, schrumpfen. Wenn er schrumpft, sollte er einen Scrollbar bekommen. -→ flex: 1 1 auto; overflow:auto;;

    Was passiert?

    Der Browser berechnet die auf Grund des Inhaltes minimal erforderliche Höhe von <main> und <footer>. Danach schaut er (weil flex mit column-Richtung), wie hoch die Box ist, in die er Flex-Gruppe einsetzen muss. Ist sie höher, wird die Flex-Gruppe höher gemacht. Die notwendige Erhöhung wird gemäß der flex-grow Verhältnisse auf die Elemente der Flex-Gruppe verteilt. Da <main> ein flex-grow von 1 hat und der <footer> ein flex-grow von 0, bekommt <main> alle Höhenzuwächse zugeteilt.

    Ist die Rahmen-Box niedriger als die Flex-Gruppe, passiert ähnliches, aber jetzt über flex-shrink. <footer> soll nicht geschrumpft werden, darum hat er ein flex-shrink von 0. Hat <main> ebenfalls ein flex-shrink von 0, kann die Flex-Gruppe nicht niedriger werden und der Body bekommt einen Scrollbar. <footer> wird dann nach unten geschoben. Hat <main> ein flex-shrink von 1, hängt das weitere Verhalten von seiner overflow-Eigenschaft ab. Der Default ist hier visible, d.h. die <main> Box ist mindestens so groß wie ihr Inhalt. Um sie verkleinern zu können, muss overflow auf auto, scroll oder hidden stehen.

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo Ingrid,

      da hatte ich nicht genau gelesen; der Footer soll ja den Teil unter Main ausfüllen, und main nicht wachsen.

      Dafür muss main ein flex: 0 1 auto; overflow:auto; bekommen (damit es nicht wächst, aber bei Bedarf schrumpft und einen Scrollbar bekommt) und der footer ein flex: 1 0 auto (damit er wächst, aber nicht schrumpft).

      Jedenfalls geht beides: Fixer Footer und dynamisches Main, oder Footer mit Minimalhöhe, der den Raum unter Main ausfüllt.

      Rolf

      --
      sumpsi - posui - clusi
      1. @Rolf B

        Wäre diese Vorgehensweise so richtig gedacht oder habe ich wieder zu kompliziert gedacht? Codepen

        PS: Text von Footer sieht man normalerweise nur unten 😉

        Mit freundlichen Grüßen

        Christian Huml

        1. @@Christian Huml

          Wäre diese Vorgehensweise so richtig gedacht oder habe ich wieder zu kompliziert gedacht? Codepen

          Letzteres.

          main soll ganz oben sein; footer ganz unten? Dann: justify-content: space-between für die Flexbox, d.h. für den body.

          html muss keine Flexbox sein; also nicht html, body { display: flex },
          sondern aufteilen: html, body { height: 100% }, den Rest nur für body.

          Oder die Höhe nicht in Prozent angeben, sondern body { height: 100vh }. Dann braucht html keine Höhenangabe.

          Damit der Hintergrund auch zwischen main und footer grün ist („Hach, ist der Rasen schön grün!“), diesen nicht für footer angeben, sondern für html oder body.

          Für footer bleibt nur footer { text-align: center } übrig.
          Das <div class="copyright">-Element kann ganz weg.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. @Gunnar Bittersmann

            Somit wäre ja der Text "Copyright Test" wieder ganz oben Codepen.

            In meinem alten Beispiel habe ich ihn aber absichtlich nach unten gesetzt.

            Mit freundlichen Grüßen

            Christian Huml

            1. @@Christian Huml

              Somit wäre ja der Text "Copyright Test" wieder ganz oben Codepen.

              Klar, wenn du für body keine Höhe angibst.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. @Gunnar Bittersmann

                Ja, habe ich vergessen da ich normal html, body schreibe 😂

                Warum sollte man html und body trennen kommt doch zum gleichen Ergebnis?

                html, body
                  height:100%;
                  display:flex;
                  flex-direction:column;
                  justify-content:space-between;
                  background-color:green;
                

                Mit freundlichen Grüßen

                Christian Huml

                1. @Gunnar Bittersmann

                  Auch wenn ich jetzt html und body nutze, gilt ja die Farbe background-color global, was ist aber jetzt wenn ich dieses Beispiel auf <header </header> erweitere und ich aber nicht die gleiche Farbe haben will?

                  Mit freundlichen Grüßen

                  Christian Huml

                  1. @@Christian Huml

                    Auch wenn ich jetzt html und body nutze, gilt ja die Farbe background-color global,

                    Was meinst du mit „global“? Hintergründe werden nicht vererbt.

                    Wenn du html oder body Hintergrund gibst, füllt dieser den Viewport aus.

                    was ist aber jetzt wenn ich dieses Beispiel auf <header </header> erweitere und ich aber nicht die gleiche Farbe haben will?

                    Dann gibst du eben header einen anderen Hintergrund – wie du es auch für main getan hast.

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                2. @@Christian Huml

                  Ja, habe ich vergessen da ich normal html, body schreibe 😂

                  Wie gesagt, wenn du 100vh verwendest, musst du die Höhe nur für body angeben.

                  Warum sollte man html und body trennen

                  Weil html keine Flexbox sein muss. Ich würde für ein Element so wenig wie möglich Stile angeben, also keine überflüssigen. Das dürfte der Wartbarkeit des Codes zugutekommen.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. @Gunnar Bittersmann

                    Ja, habe ich vergessen da ich normal html, body schreibe 😂

                    Wie gesagt, wenn du 100vh verwendest, musst du die Höhe nur für body angeben.

                    Nur zum Verständnis 100vh entspricht 100% der Höhe, anderes Beispiel 25vh entspricht 25% der Höhe. Dies gleiche würde sich auch bei vw darstellen. Ist dies korrekt?

                    Warum sollte man html und body trennen

                    Weil html keine Flexbox sein muss. Ich würde für ein Element so wenig wie möglich Stile angeben, also keine überflüssigen. Das dürfte der Wartbarkeit des Codes zugutekommen.

                    Ok, macht Sinn. Werde ich dann ab sofort ändern. 😀

                    Mit freundlichen Grüßen

                    Christian Huml

                    1. @@Christian Huml

                      Nur zum Verständnis 100vh entspricht 100% der Höhe

                      der Höhe des Viewports – im Gegensatz zu 100%, was sich auf alles Mögliche bezieht.

                      Dies gleiche würde sich auch bei vw darstellen.

                      Das Gleiche in der Breite.

                      LLAP 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. Hallo @Gunnar Bittersmann,

                        vielen Dank für deine Rückmeldung. Benötige ich dann überhaupt flexbox?

                        body
                        {
                           height:100vh;
                           background-color:red;
                        }
                        

                        PS: Nur Beispielweise.

                        Mit freundlichen Grüßen

                        Christian Huml

                        1. @Gunnar Bittersmann

                          Frage hat sich von selber geklärt 😀

                          Mit freundlichen Grüßen

                          Christian Huml