CSS, damit die Fußzeile der HTML-Seite mit einer Mindesthöhe am unteren Rand der Seite bleibt, aber die Seite nicht überlappt

Question

CSS, damit die Fußzeile der HTML-Seite mit einer Mindesthöhe am unteren Rand der Seite bleibt, aber die Seite nicht überlappt

Gefragt el 13 de Marsch, 2009: Wann wurde die Frage gestellt
1452042 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe die folgende Seite (deadlink: http://www.workingstorage.com/Sample.htm ), die eine Fußzeile hat, die ich nicht am unteren Rand der Seite platzieren kann.

Ich möchte, dass die Fußzeile

am unteren Rand des Fensters bleiben, wenn die Seite kurz ist und der Bildschirm nicht ausgefüllt wird, und
am Ende des Dokuments verbleiben und sich wie gewohnt nach unten bewegen, wenn mehr als eine Bildschirmmaske Inhalt vorhanden ist (anstatt den Inhalt zu überlappen).

Das CSS ist vererbt und verwirrt mich. Ich kann es anscheinend nicht richtig ändern, um eine Mindesthöhe für den Inhalt festzulegen oder die Fußzeile nach unten zu verschieben.

Gefragt el 13 de Marsch, 2009 von Caveatrob

54 Stimmen

Es ist erstaunlich, dass dies ein so häufiges Problem ist. Vielleicht werden wir in CSS4 Implementierungen von "make a nav bar" und "make a footer" sehen, da diese so häufig versucht werden.

Kommentiert el 15 de Marsch, 2012 von isomorphismes

1 Stimmen

Es wird nie CSS4 geben (CSS3 wird nur wachsen). Ich denke, dies wird mit der Implementierung von flexbox .

Kommentiert el 5 de Februar, 2014 von Marijke Luttekes

6 Stimmen

Ein ausgezeichneter Artikel zu diesem Thema: css-tricks.com/couple-takes-sticky-footer

Kommentiert el 30 de Oktober, 2019 von Phil

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

54voto

Liam Punkte 24793

Ab IE7 können Sie einfach Folgendes verwenden

#footer {
    position:fixed;
    bottom:0;
}

Siehe caniuse zur Unterstützung.

Beantwortet el 23 de Juli, 2013 von Liam (24793 Punkte )

110 Stimmen

Ich möchte nicht, dass die Fußzeile ganz unten steht, wenn der Inhalt über die Fußzeile hinausgeht. Ich möchte, dass die Fußzeile unten bleibt, wenn nicht genug Inhalt vorhanden ist, und sich dann wie üblich nach unten ausdehnt, wenn mehr als ein Bildschirm voll vorhanden ist. Die klebrige Fußzeile hat dieses Problem gelöst.

Kommentiert el 23 de Juli, 2013 von Caveatrob

0 Stimmen

@Caveatrob: Ich habe mir erlaubt, diese wichtige Information in Ihre Frage einzubauen, um Missverständnissen vorzubeugen (für künftige Leser: Sie haben das Problem in der Zwischenzeit vermutlich gelöst :-) ).

Kommentiert el 27 de Juli, 2018 von sleske

2 Stimmen

Diese Lösung ist die einzige, die die Fußzeile auf jede Seite druckt, und sie ist so einfach! Aber ich bekomme es nicht hin, dass sich der Inhalt nicht mit dem Hauptinhalt überschneidet. Hat jemand eine Lösung für dieses Problem?

Kommentiert el 14 de Juni, 2020 von Hatzen

Answer 3

37voto

Rasaf Ibrahim Punkte 530

Behalten Sie die Fußzeile am unteren Rand, indem Sie Flexbox verwenden

<div style="min-height:100vh; display:flex; flex-direction:column; 
            justify-content:space-between;">

     <div> <!-- Wrapper (Without footer) -->

        <header>
         I am a header.
        </header>

        <article>
        I am an article!
        </article>

    </div> <!-- End: Wrapper (Without footer) -->

     <footer>
     I am a footer.
     </footer>

</div>

Hinweis

Achten Sie darauf, dass Sie alles in ein <div> oder jedes andere Element auf Blockebene mit den folgenden CSS-Stilen: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .
Stellen Sie sicher, dass Sie alles außer dem Fußzeilenelement in eine <div> oder jedes andere Element auf Blockebene.
Stellen Sie sicher, dass Sie <footer> oder ein anderes Element auf Blockebene, um die Fußzeile einzuschließen.

Code Erläuterung

min-height: 100vh stellt sicher, dass das Body-Element mindestens auf die volle Höhe des Bildschirms gestreckt wird
flex-direction: column behält das Verhalten des normalen Dokumentflusses in Bezug auf die Beibehaltung von gestapelten Blockelementen bei (wobei davon ausgegangen wird, dass alle direkten Kinder des Körpers tatsächlich Blockelemente sind).
justify-content:space-between schiebt die Fußzeile an den unteren Rand des Bildschirms.

Sehen Sie sich an, wie Sie das Gleiche tun können (wobei die Fußzeile unten bleibt), indem Sie Bootstrap 5 verwenden - Link

Beantwortet el 5 de Juni, 2021 von Rasaf Ibrahim (530 Punkte )

0 Stimmen

Einfachste, aber dennoch erstaunlich, funktioniert genau richtig!

Kommentiert el 8 de Oktober, 2021 von anaszaman

0 Stimmen

Funktioniert wie ein Zauber

Kommentiert el 10 de Oktober, 2021 von itsmnthn

Answer 4

19voto

Sanjeev Punkte 2527

Eine einfache Lösung, die ich benutze, funktioniert ab IE8+

Geben Sie min-height:100% auf html, so dass, wenn der Inhalt ist weniger dann immer noch Seite nimmt die volle View-Port Höhe und Fußzeile klebt am unteren Rand der Seite. Wenn der Inhalt zunimmt, verschiebt sich die Fußzeile mit dem Inhalt nach unten und bleibt am unteren Rand.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

Beantwortet el 19 de September, 2014 von Sanjeev (2527 Punkte )

0 Stimmen

Es gut..aber nur Update .pageContentWrapper{ padding-bottom:100px;/* Höhe der Fußzeile*/ }

Kommentiert el 22 de September, 2016 von Subodh Sharma

0 Stimmen

Ich möchte, wenn möglich, keine unnötige Bildlaufleiste einbauen.

Kommentiert el 25 de Juli, 2019 von Константин Ван

Answer 5

16voto

Aarth Tandel Punkte 921

Tun Sie dies

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Sie können auch lesen, dass flex von allen modernen Browsern unterstützt wird

Update : Ich habe über Flex gelesen und es ausprobiert. Es hat bei mir funktioniert. Ich hoffe, es funktioniert auch bei Ihnen. Hier ist, wie ich implementiert.hier Haupt ist nicht die ID es ist die div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

Hier können Sie mehr über Flex lesen https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bitte beachten Sie, dass ältere Versionen des IE diese Funktion nicht unterstützen.

Beantwortet el 1 de September, 2017 von Aarth Tandel (921 Punkte )

1 Stimmen

Dies ist in der Praxis die beste Antwort. Verwendung von flex-grow: 1 für etwas oberhalb der Fußzeile sorgt dafür, dass die Fußzeile am unteren Rand bleibt.

Kommentiert el 7 de Kann, 2020 von iBug

1 Stimmen

Die erste Antwort, die ich gefunden habe, die tatsächlich funktioniert und nicht zufällig ist div s. Ich danke Ihnen.

Kommentiert el 12 de Juli, 2020 von Chris du Plessis

Answer 6

16voto

Jose Rui Santos Punkte 14286

Eine andere, wirklich einfache Lösung ist diese:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

Der Trick besteht in der Verwendung eines display:table für das gesamte Dokument und display:table-row con height:0 für die Fußzeile.

Da die Fußzeile das einzige untergeordnete Element des Körpers ist, das eine Anzeige als table-row wird sie am unteren Rand der Seite angezeigt.

Beantwortet el 9 de August, 2014 von Jose Rui Santos (14286 Punkte )

0 Stimmen

Ich liebe CSS-Tabellen, aber sie schaffen Probleme in der Folge, die ziemlich seltsam sind: stackoverflow.com/questions/24898115/

Kommentiert el 10 de August, 2014 von Costa Michailidis

1 Stimmen

Diese Lösung scheint nicht ganz zu funktionieren - Firefox ignoriert die Fußzeilenhöhe 0. Ich habe stattdessen die Höhe 1px oder sogar 1% verwendet. Edge, IE11, Chrome und mobile Safari sind glücklich mit 0.

Kommentiert el 25 de Kann, 2017 von Kitet

0 Stimmen

Ich finde diese Lösung wirklich toll. Aber wenn ich mein Layout so aufbaue, wird die Browserberechnung der untergeordneten Elemente durcheinander gebracht. Sagen wir, wir wollen einen Container am oberen Rand der Seite haben und er muss sein height: 100% dann ist es tatsächlich 100 %, wenn das Verhältnis des Ansichtsfensters 1/1 (quadratisch) ist. Wenn das Ansichtsfenster breiter wird (Querformat), beträgt die Höhe mehr als 100% und wenn es schmaler wird (Hochformat) weniger als 100%. Die Höhe ist also proportional zur Breite des Fensters. Ich habe versucht, es mit einem anderen Wrapper zu lösen, aber das hat nicht funktioniert. Hat jemand eine Lösung oder zumindest einen Hinweis???

Kommentiert el 5 de Juli, 2017 von Axel

Anzeigen 4 weitere Kommentare

CSS, damit die Fußzeile der HTML-Seite mit einer Mindesthöhe am unteren Rand der Seite bleibt, aber die Seite nicht überlappt

Antworten

Behalten Sie die Fußzeile am unteren Rand, indem Sie Flexbox verwenden

Hinweis

Code Erläuterung

Css

Html

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

CSS, damit die Fußzeile der HTML-Seite mit einer Mindesthöhe am unteren Rand der Seite bleibt, aber die Seite nicht überlappt

Antworten

Behalten Sie die Fußzeile am unteren Rand, indem Sie Flexbox verwenden

Hinweis

Code Erläuterung

Css

Html

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: