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

9voto

Paolo Bergantino Punkte 465120

Dies wird als "Sticky Footer" bezeichnet. A Google-Suche denn sie liefert eine Vielzahl von Ergebnissen. Eine CSS-Fußzeile ist diejenige, die ich erfolgreich verwendet habe. Aber es gibt noch mehr.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Quelle für diesen Code

Beantwortet el 13 de Marsch, 2009 von Paolo Bergantino (465120 Punkte )

Answer 3

9voto

Nemus Punkte 3740

So habe ich das gleiche Problem gelöst

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

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

<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

Beantwortet el 1 de August, 2016 von Nemus (3740 Punkte )

Answer 4

8voto

Ben Jackson Punkte 11084

Eine Sache, bei der man vorsichtig sein sollte, sind mobile Geräte, da sie die Idee des Ansichtsfensters auf eine "ungewöhnliche" Weise umsetzen:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

Daher ist die Verwendung von position: fixed; (wie ich es an anderer Stelle empfohlen habe) ist normalerweise nicht der richtige Weg. Natürlich kommt es auf das genaue Verhalten an, das Sie erreichen wollen.

Was ich verwendet habe und was sowohl auf dem Desktop als auch auf dem Handy gut funktioniert hat, ist:

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

mit

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

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

Beantwortet el 20 de April, 2013 von Ben Jackson (11084 Punkte )

Answer 5

8voto

Aashutosh Kumar Punkte 403

Funktioniert bei mir.

#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}

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

#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}

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

Beantwortet el 1 de Kann, 2021 von Aashutosh Kumar (403 Punkte )

Answer 6

8voto

Karthikaeyan Punkte 561

footer {
  margin-top:calc(5% + 60px);
}

Das funktioniert gut

Beantwortet el 20 de Oktober, 2018 von Karthikaeyan (561 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

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: