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
1452040 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

582voto

vsync Punkte 101339

Nachfolgend sind 4 verschiedene Methoden von mir aufgeführt:

In jedem Beispiel sind die Texte frei editierbar, um zu veranschaulichen, wie der Inhalt in verschiedenen Szenarien wiedergegeben würde.

1) Flexbox

body{ height:100vh; margin:0; }

header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

2) Raster

body{ 
  min-height: 100vh; 
  margin: 0; 

  display: grid;
  grid-template-rows: auto 1fr auto;
}

header{ 
  min-height:50px;
  background:lightcyan; 
}

footer{ 
  min-height:50px; 
  background:PapayaWhip; 
}

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

Bei der folgenden Methode wird ein "Trick" angewendet, indem ein ::after Pseudo-Element auf der body und legen Sie fest, dass er die genau Höhe der Fußzeile, so dass sie genau den gleichen Platz wie die Fußzeile einnimmt, wenn die Fußzeile also absolute darüber positioniert ist, würde es so aussehen, als würde die Fußzeile wirklich Platz einnehmen und die negativen Auswirkungen ihrer absoluten Positionierung beseitigen (z. B. über den Inhalt des Körpers gehen)

3) `position:absolute` (nein dynamisch Höhe der Fußzeile)

body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

4) Tabellen-Layout

html{ height:100%; }
body { min-height:100%;  margin:0; }

header {
  height: 50px;
  background: lightcyan;
}

article { 
  height: 1%;
}

footer {
  height: 50px;
  background: PapayaWhip;
}

/**** Trick: ****/

body {
  display: table;
  width: 100%; 
}

body > footer {
   display: table-row;
}

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

Beantwortet el 3 de Dezember, 2013 von vsync (101339 Punkte )

0 Stimmen

Es ist einfach und elegant und - was noch wichtiger ist - es funktioniert. Andere Lösungen versagen, wenn man anfängt, Divs mit display: table display: table-row display:table-cell . Ich habe jedoch festgestellt, dass ich Folgendes hinzufügen muss body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;} um eine Bildlaufleiste zu vermeiden. Sie könnten dafür sorgen, indem Sie die body:after height aber ich gebe meine Werte in rem und nicht in px an, so dass es problematisch wird.

Kommentiert el 27 de Juni, 2017 von Steve Waring

24 Stimmen

@SteveWaring - Vielen Dank. Ich habe diese Antwort aktualisiert, da sie ziemlich alt war. Jetzt bin ich für die Verwendung von flexbox

Kommentiert el 28 de Juni, 2017 von vsync

1 Stimmen

Das CSS unter "basic common markup" hatte einen kleinen Fehler, der dazu führte, dass es nicht funktionierte (der Fehler war in der verlinkten "DEMO" nicht vorhanden, was in Ordnung ist). Ich habe mir die Freiheit genommen, ihn zu beheben.

Kommentiert el 12 de Juli, 2018 von sleske

Anzeigen 10 weitere Kommentare

Answer 3

379voto

Jon Winstanley Punkte 22342

Eine einfache Methode besteht darin, den Körper zu 100% Ihrer Seite, mit einer min-height de 100% auch. Dies funktioniert gut, wenn sich die Höhe der Fußzeile nicht ändert.

Geben Sie der Fußzeile einen negativen Rand nach oben:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Beantwortet el 27 de Marsch, 2009 von Jon Winstanley (22342 Punkte )

69 Stimmen

Dies funktioniert nur, wenn Sie die Höhe Ihrer Fußzeile im Voraus kennen. Manchmal haben Fußzeilen dynamischen Inhalt, oder Sie bauen ein Framework. Irgendwelche Ideen für Fußzeilen mit variabler Höhe?

Kommentiert el 23 de Juni, 2014 von Costa Michailidis

0 Stimmen

@Costa überprüfen Sie meine Antwort aquí für eine Lösung, die mit höhenverstellbaren Fußzeilen funktioniert.

Kommentiert el 9 de August, 2014 von Jose Rui Santos

0 Stimmen

Für dynamische Inhalte lassen Sie einfach die "Höhe" weg und die Fußzeile passt sich dem Inhalt an. Nicht in allen Browsern getestet

Kommentiert el 23 de September, 2015 von m47730

Anzeigen 4 weitere Kommentare

Answer 4

95voto

m.spyratos Punkte 3322

Eine sehr einfache Flex-Lösung, die nicht von festen Höhen oder wechselnden Positionen der Elemente ausgeht.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Browser-Unterstützung

Alle gängigen Browser, außer IE11 und darunter.

Achten Sie darauf, dass Sie Autoprefixer für geeignete Präfixe.

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

Beantwortet el 18 de August, 2017 von m.spyratos (3322 Punkte )

7 Stimmen

Funktionierte wie ein Charme! auch für res mehr als 4k Fußzeile klebt am Boden

Kommentiert el 5 de Juni, 2020 von Arpan Banerjee

2 Stimmen

Wichtigste Browser IE11

Kommentiert el 14 de August, 2021 von muthuh

1 Stimmen

Es hat geklappt! Können Sie bitte erklären, wie es funktioniert?

Kommentiert el 12 de Oktober, 2021 von Raghav Sharma

Anzeigen 1 weitere Kommentare

Answer 5

76voto

Tamás Pap Punkte 16940

Ein sehr einfacher Ansatz, der browserübergreifend gut funktioniert, ist der folgende:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

Beantwortet el 1 de November, 2013 von Tamás Pap (16940 Punkte )

2 Stimmen

Dieser Ansatz funktioniert nicht mit Firefox auf Android, wenn Sie die Größe des Fensters mit zwei Fingern ändern

Kommentiert el 7 de Oktober, 2020 von rubo77

0 Stimmen

Ja, mir gefällt dieser Ansatz nicht. Er ist nicht sehr reaktionsschnell, denn wenn Sie ein Gerät mit einer geringeren Höhe haben (z. B. ein mobiles Gerät) und der Inhalt natürlich über die Höhe des Betrachters hinausgeht, wird die Fußzeile aufgrund ihrer absoluten Positionierung Ihren Inhalt überlagern. Ich denke, der Flexbox-Ansatz ist besser.

Kommentiert el 20 de Januar, 2022 von Davis Jones

Answer 6

64voto

Natalia Larrieux Punkte 657

Ich habe dies verwendet, um meine Fußzeile am unteren Rand anzubringen, und es hat funktioniert:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Das ist die einzige Änderung, die Sie im HTML-Code vornehmen müssen. div mit dem "allButFooter" Klasse. Ich habe das mit allen Seiten gemacht, mit denen, die so kurz waren, dass ich wusste, dass die Fußzeile nicht unten bleiben würde, und auch mit Seiten, die so lang waren, dass ich bereits wusste, dass ich scrollen musste. Ich habe dies getan, um zu sehen, dass es auch dann funktioniert, wenn der Inhalt einer Seite dynamisch ist.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

Le site "allButFooter" Klasse hat eine min-height Wert, der von der Höhe des Ansichtsfensters abhängt ( 100vh bedeutet 100% der Höhe des Ansichtsfensters) und die Höhe der Fußzeile, von der ich bereits wusste, dass sie 40px .

Das ist alles, was ich getan habe, und es hat bei mir perfekt funktioniert. Ich habe es nicht in allen Browsern ausprobiert, nur in Firefox, Chrome und Edge, und die Ergebnisse waren so, wie ich wollte. Die Fußzeile klebt am unteren Rand, und Sie müssen nicht mit z-index, Position oder anderen Eigenschaften durcheinander bringen. Die Position jedes Elements in meinem Dokument war die Standardposition, ich habe sie nicht auf absolut oder fixiert oder so geändert.

Arbeiten mit responsivem Design

Hier ist etwas, das ich gerne ausräumen würde. Diese Lösung, mit der gleichen Fußzeile, die 40px hoch war, funktionierte nicht wie erwartet, wenn ich in einem responsiven Design mit Twitter-Bootstrap . Ich musste den Wert, den ich in der Funktion subtrahierte, ändern:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

Dies ist wahrscheinlich darauf zurückzuführen, dass Twitter-Bootstrap verfügt über eigene Ränder und Abstände, deshalb musste ich diesen Wert anpassen.

Beantwortet el 22 de Marsch, 2016 von Natalia Larrieux (657 Punkte )

0 Stimmen

Ich habe mit allen möglichen Lösungen für dieses Problem Probleme bekommen. Diese Lösung funktioniert mit meiner Seite, die variiert, was im Körper angezeigt wird mit display: none Danke. Es ist auch schön und einfach.

Kommentiert el 1 de Juli, 2017 von Steve Waring

0 Stimmen

Nach vielen Stunden des Ausprobierens von Lösungen funktionierten nur zwei. nl. position: fixed; bottom: 0 und diese. Diese Lösung ist die beste, weil die Fußzeile nicht am unteren Rand klebt, sondern am Ende der scrollbaren Seite bleibt.

Kommentiert el 24 de November, 2019 von Hmerman6006

0 Stimmen

Um auf Ihrer Antwort aufzubauen, können Sie das Problem auf andere Weise angehen, indem Sie die .footer {max-height: calc(100vh+40px); position: absolute} . Wie es auch funktioniert, sollten Sie einfach Ihre Körpergröße kennen.

Kommentiert el 24 de November, 2019 von Hmerman6006

Anzeigen 1 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

Nachfolgend sind 4 verschiedene Methoden von mir aufgeführt:

1) Flexbox

2) Raster

3) `position:absolute` (nein dynamisch Höhe der Fußzeile)

4) Tabellen-Layout

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

Nachfolgend sind 4 verschiedene Methoden von mir aufgeführt:

1) Flexbox

2) Raster

3) position:absolute (nein dynamisch Höhe der Fußzeile)

4) Tabellen-Layout

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

3) `position:absolute` (nein dynamisch Höhe der Fußzeile)