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

3voto

Usman Iqbal Punkte 2168

Was ich getan habe

Html

    <div>
      <div class="register">
         /* your content*/    
      </div>
      <div class="footer" />
  <div/>

CSS

.register {
          min-height : calc(100vh - 10rem);
  }

.footer {
         height: 10rem;
 }

Sie müssen die Position nicht verwenden fest y absolut . Schreiben Sie einfach die Html-Datei in der richtigen Weise.

Beantwortet el 2 de Juli, 2020 von Usman Iqbal (2168 Punkte )

0 Stimmen

Dies ist die beste Lösung. Ich verwende sie. Die wichtigsten Antworten funktionieren nicht so gut wie diese einfache Lösung mit vh und calc.

Kommentiert el 8 de April, 2022 von Pity Maia

Answer 3

3voto

RICHARD ABRAHAM Punkte 1700

ONE line Lösung mit Bootstrap

Abgesehen von allen CSS- und jQuery-Lösungen,
Ich habe eine Lösung aufgeführt, die Bootstrap mit einer einzigen Klassendeklaration auf Körper Tag: d-flex flex-column justify-content-between

Este NICHT erfordern Kenntnis der Höhe der Fußzeile im Voraus.
Este NICHT erfordern Einstellung Position absolut .

Este WERKE mit dynamischen Divs, die Überlauf auf kleineren Bildschirmen.

html, body { height: 100%; }

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body class="d-flex flex-column justify-content-between text-white text-center">

    <header class="p-5 bg-dark">
      <h1>Header</h1>
    </header>
    <main class="p-5 bg-primary">
      <h1>Main</h1>
    </main>
    <footer class="p-5 bg-warning">
      <h1>Footer</h1>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

</html>

Beantwortet el 14 de August, 2020 von RICHARD ABRAHAM (1700 Punkte )

0 Stimmen

Netter Ansatz, obwohl Sie vielleicht min-height: 100vh; zum Körper hinzufügen möchten, damit er das gesamte Ansichtsfenster ausfüllt

Kommentiert el 25 de August, 2020 von paul.ago

Answer 4

3voto

Cybernetic Punkte 10978

Position fixed con bottom , left y right auf 0 eingestellt ist, funktioniert bei mir am besten:

.footer {    
    position: fixed;
    background : #d1ccc0;
    bottom : 0;
    left : 0;
    right : 0;
    height : 50px;
}

Position absolute klebt nicht am Boden, sondern fixed tut.

Beantwortet el 30 de Juni, 2021 von Cybernetic (10978 Punkte )

Answer 5

3voto

husayt Punkte 13449

Ich habe mich selbst mit diesem Problem befasst. Ich habe eine ganze Reihe von Lösungen gesehen, und jede von ihnen hatte Probleme, oft mit einigen magischen Zahlen.

Unter Verwendung bewährter Verfahren aus verschiedenen Quellen habe ich also diese Lösung gefunden:

http://jsfiddle.net/vfSM3/248/

Was ich hier speziell erreichen wollte, war, den Hauptinhalt zwischen Fußzeile und Kopfzeile im grünen Bereich zu verschieben.

Hier ist ein einfaches CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

Beantwortet el 26 de September, 2013 von husayt (13449 Punkte )

3 Stimmen

Ich hasse derartig gestaltete Websites. Warum wollen Sie die Textmenge einschränken, die ich gleichzeitig lesen kann? Ich muss die Kopf- und Fußzeile nicht ständig sehen, ich weiß, wo ich sie finde, wenn ich sie brauche.

Kommentiert el 15 de November, 2013 von Tarmil

2 Stimmen

@Tarmil schauen Sie sich an numerics.info . Sehen Sie jetzt, wann dies nützlich sein könnte?

Kommentiert el 7 de Januar, 2014 von husayt

Answer 6

2voto

Abdallah Abdillah Punkte 1169

Sie können dies tun

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

Beantwortet el 16 de Januar, 2018 von Abdallah Abdillah (1169 Punkte )

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

Antworten

ONE line Lösung mit Bootstrap

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

ONE line Lösung mit Bootstrap

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: