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

5voto

Camo Punkte 1780

Ich habe hier gerade eine ähnliche Frage beantwortet:

Positionierung der Fußzeile am unteren Rand der Seite mit fester Kopfzeile

Ich bin ziemlich neu in der Web-Entwicklung, und ich weiß, dass dies bereits beantwortet wurde, aber dies ist der einfachste Weg, den ich gefunden, um es zu lösen und ich denke, ist irgendwie anders. Ich wollte etwas flexibel, weil die Fußzeile meiner Web-App eine dynamische Höhe hat, endete ich mit FlexBox und ein Spacer.

Beginnen Sie mit der Einstellung der Höhe für html und body

html, body { height: 100%; display: flex; flex-direction: column; margin: 0px; }

Ich nehme an, dass ein column Verhalten für unsere App, für den Fall, dass Sie eine Kopfzeile, einen Helden oder einen beliebigen Inhalt vertikal ausgerichtet hinzufügen müssen.

Erstellen Sie die Spacer-Klasse

.spacer { flex: 1; }
Später könnte Ihr HTML-Code also etwa so lauten

<html> <body> <header> Header </header> Some content... <div class='spacer'></div> <footer> Footer </footer> </body> </html>

Hier können Sie damit spielen https://codepen.io/anon/pen/xmGZQL

Beantwortet el 14 de Dezember, 2018 von Camo (1780 Punkte )

Answer 3

4voto

titleLogin Punkte 489

Sie müssen Folgendes verwenden position: absolute; dies wichtig ist, dann bottom:0

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Beantwortet el 16 de Dezember, 2021 von titleLogin (489 Punkte )

Answer 4

4voto

blmayer Punkte 290

Das habe ich mit Hilfe des CSS-Gitters erreicht, bei dem ich im Grunde 3 Zeilen definiert habe:

Kopfzeile
Inhalt
Fußzeile

Der Trick dabei ist, die Fußzeile am Ende der Zeile auszurichten, etwa so:

CSS

body {
    display: grid;
    grid-template-rows: auto auto auto;
}

footer {
    display: grid;
    align-self: end; /* The trick */
}

HTML-Datei

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <header>
    Header content
  </header>

  <h1>main body</h1>
  <p>This is a paragraph.</p>

  <footer>
    <p>Hello there.</p>
  </footer>
</body>
</html>

Sie können mehr Zeilen verwenden, aber denken Sie daran, das zum CSS hinzuzufügen, oder wickeln Sie alles in ein Div ein.

Dieser Leitfaden aquí hat mir wirklich geholfen, das herauszufinden.

Beantwortet el 22 de Marsch, 2021 von blmayer (290 Punkte )

Answer 5

4voto

Sam Jones Punkte 4179

Meine jQuery-Methode setzt die Fußzeile an den unteren Rand der Seite, wenn der Seiteninhalt kleiner als die Fensterhöhe ist, oder setzt die Fußzeile sonst einfach hinter den Inhalt:

Wenn Sie den Code in einem eigenen Bereich vor dem anderen Code unterbringen, verringert sich auch die Zeit, die für die Neuanordnung der Fußzeile benötigt wird.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

Beantwortet el 18 de Oktober, 2013 von Sam Jones (4179 Punkte )

Answer 6

3voto

Nicht registrierter Benutzer Punkte 0

Ich denke, Sie können den Hauptinhalt auf die Höhe des Ansichtsfensters einstellen, so dass die Höhe des Hauptinhalts die Position der Fußzeile bestimmt, wenn der Inhalt größer ist.

* {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

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

main {
  background: blue;
  /* This is the most important part*/
  height: 100vh; 

}
footer{
  background: black;
  height: 50px;
  bottom: 0;
}

<header></header>
<main></main>
<footer></footer>

Beantwortet el 9 de Februar, 2021 von Nicht registrierter Benutzer (0 Punkte )

0 Stimmen

Ich stoße auf ein Problem, wenn der Inhalt im Hauptfenster höher ist als das Hauptfenster. In meinem Fall habe ich viele Artikel in der Hauptseite als Gitter. Wenn die Anzahl der Artikel z.B. 50 ist, habe ich einen sehr großen vertikalen Bildlauf und der Inhalt im Hauptbereich ist sehr hoch. In dieser Situation erscheint die Fußzeile irgendwo hinter meinem Raster. FIX: Ich habe NUR min-height:100vh anstelle von height:100vh im main eingestellt und es funktioniert in jedem Fall perfekt. P.S. Ich verwende material-ui in reactjs aber es spielt keine Rolle, ich denke

Kommentiert el 15 de Februar, 2021 von Александър К.

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

Antworten

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

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: