Wie Stick <footer> Element am Ende der Seite (HTML5 und CSS3)?

Wenn ich Position verwenden relativ ohne Inhalt, Footer nach oben geht, mit absolute mit viel Inhalt, geht die Fußzeile nach unten, und mit festen es ist immer da.Wie Stick <footer> Element am Ende der Seite (HTML5 und CSS3)?

Gibt es einen einfachen Weg, um am Ende der Seite unabhängig vom Inhalt zu gelangen, schrumpft und wächst mit Inhalt?

Wenn es viele Inhalte gibt, können wir die Fußzeile auf der ersten Seite sehen, und wenn es wenige Inhalte gibt, werden wir unten sehen.

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     html,body { 
      padding: 0; 
      margin: 0; 
     } 

     header { 
      position:fixed; 
      top:0; 
      width:100%; 
      height:40px; 
      background-color:#333; 
      padding:20px; 
     } 

     footer { 
      background-color: #333; 
      width: 100%; 
      bottom: 0; 
      position: relative; 
     } 
     #main{ 
      padding-top:100px; 
      text-align:center; 
     } 
    </style> 
</head> 
<body> 
    <header> 
    header 
    </header> 

    <div id="main"> 
    main 
    </div> 

    <footer> 
    footer 
    </footer> 
</body> 
</html>

Quelle

2013-04-12 Joe

Hier Ich habe ein gutes Beispiel gefunden, aber viel ungenutzten CSS-Code hinzugefügt. http://twitter.github.io/bootstrap/examples/sticky-footer-navbar.html – Joe

Anzeige hinzufügen: Inline-Block zur Fußzeile selbst, ich benutze dies im allgemeinen Fall. –

setzen nur position: fixed in die Fußzeile Element (anstatt relativen)

Jsbin example

Beachten Sie, dass Sie auch eine margin-bottom, um das main Element zumindest gleich der Höhe des Satzes müssen möglicherweise Fußzeilenelement (z. B. margin-bottom: 1.5em;) Andernfalls könnte der Fußbereich des Hauptinhalts in einigen Fällen von der Fußzeile teilweise überlappt werden.

Quelle

2013-04-12 16:19:48 fcalderan

Aber mit einer Menge Inhalt, ist es immer noch dort jsfiddle.net/84LxZ – Joe

http://twitter.github.io/bootstrap/examples/sticky-footer-navbar.html – Joe

Für Fußzeile Wechsel von position: relative; zu position:fixed;

footer { 
      background-color: #333; 
      width: 100%; 
      bottom: 0; 
      position: fixed; 
     }

Beispiel: http://jsfiddle.net/a6RBm/

Quelle

2013-04-12 16:20:13

Aber mit einer Menge Inhalt, ist es immer noch da http://jsfiddle.net/84LxZ/ – Joe

http://twitter.github.io/bootstrap/examples/sticky-footer-navbar.html – Joe

Beispiel Link verschoben: http://getbootstrap.com/examples/sticky-footer-navbar/ –

Ich würde dies in HTML verwenden 5 ... gerade sayin

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    background-color: #f5f5f5; 
}

Quelle

2014-03-05 20:16:16 Omar

absolute Positionierung entfernt ein Element (hier: die Fußzeile) aus dem Dokumentfluss, also, wenn Sie viel Inhalt vertikal haben, wird die Fußzeile über diesen Inhalt platziert werden – Martin

Hier ist ein Beispiel css3 mit:

CSS:

html, body { 
    height: 100%; 
    margin: 0; 
} 
#wrap { 
    padding: 10px; 
    min-height: -webkit-calc(100% - 100px);  /* Chrome */ 
    min-height: -moz-calc(100% - 100px);  /* Firefox */ 
    min-height: calc(100% - 100px);  /* native */ 
} 
.footer { 
    position: relative; 
    clear:both; 
}

HTML:

<div id="wrap"> 
    body content.... 
</div> 
<footer class="footer"> 
    footer content.... 
</footer>

jsfiddle

aktualisieren
Wie @ Martin wies die'position: relative' ist nicht zwingend auf dem .footer Element, das gleiche gilt für clear:both. Diese Eigenschaften gibt es nur als Beispiel. So ist die minimale CSS notwendig, um die Fußzeile auf dem Boden bleiben sollte sein:

html, body { 
    height: 100%; 
    margin: 0; 
} 
#wrap { 
    min-height: -webkit-calc(100% - 100px);  /* Chrome */ 
    min-height: -moz-calc(100% - 100px);  /* Firefox */ 
    min-height: calc(100% - 100px);  /* native */ 
}

Außerdem gibt es einen ausgezeichneten Artikel auf CSS-Tricks verschiedene Möglichkeiten zeigen, dies zu tun: https://css-tricks.com/couple-takes-sticky-footer/

Quelle

2015-09-25 11:54:01 Victor

Sind Sie sicher, dass 'position: relative' auf dem Fußzeilenelement benötigt wird ? Ihre Lösung funktioniert aufgrund der angegebenen Höhen sehr gut. Aber ich denke "Position: relativ" in der Fußzeile wird nicht benötigt. Es wäre nur erforderlich, wenn das Fußzeilenelement darunter ein Unterelement mit "position: absolute" hätte und Sie dieses Unterelement relativ zur Fußzeile platzieren wollten. – Martin

@Martin die'position: relative' ist nicht obligatorisch, das gleiche gilt für 'clear: both' und' 'padding'' auf dem' # wrap' Element. Ich stelle diese Eigenschaften nur als Beispiel für eine minimale Struktur für eine HTML-Seite. Danke für den Hinweis, ich werde die Antwort aktualisieren. – Victor

Wie Stick <footer> Element am Ende der Seite (HTML5 und CSS3)?

Antwort

Verwandte Themen