Feste Fußzeile am Ende der Seite

Möchte ich eine Feste Fußzeile am unteren Rand meiner Seite, wo ich die Möglichkeit habe, eine Zeile text (alle Texte zentriert), genau wie dieser.

Dies ist mein Aktueller code.

Ich habe versucht, mit anderen tutorials, aber keine gearbeitet haben.

Wie kann ich dies tun?

  • Überprüfen Sie die "Related" - links auf der rechten Seite dieser Seite.
  • Welche tutorials hast du versucht und welche Probleme hast du laufen?
  • Alle tutorials sagen Sie set html und body auf 100%. Tun, dass Schrauben bis meine ganze Seite, indem Sie alle den Inhalt nach oben.
InformationsquelleAutor Feriscool | 2013-02-08
  1. 2

    Ich würde empfehlen, mit Ryan Fait ist sticky footer. Sie können erreichen, was Sie zu tun versuchen mit reinem CSS.

    HTML:

    <div class="wrapper">
    Content Here
    <div class="push"></div>
</div>
<div class="footer"></div>

    CSS:

    * {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

.footer { /* centers the text */
    text-align: center; /* horizontal centering */
    line-height: 142px; /* vertical centering; should be equal to the footer height */
}
    • Das problem mit dieser Einstellung ist body und html auf 100%. Es Schrauben bis meine ganze Seite.
    • Warum sollte dein body und html haben eine Höhe anders als 100%?
    • Wenn ich es zu 100%, es schiebt sich der ganze Inhalt nach oben. Blick in den code habe ich in dem ursprünglichen Beitrag.
    • Können Sie Ihre CSS?
    • Es ist der Originale CSS-kommt mit Bootstrap: http://pastebin.com/yKwXe5AQ
    • Das problem mit diesem ist, dass, wenn ich body,html height:100%, bewegt sich der ganze Inhalt nach oben (der held-Gerät bewegt sich nach oben unter der navbar): http://i.imgur.com/DdSQL37.png
    • Haben Sie anschließend die HTML-Struktur richtig? Die bootstrap hat einige divs außerhalb des Behälters, und die Fußzeile wird in die container. Und haben Sie den Klassennamen in der CSS oder HTML zu richten mit der Ryan Fait Namen/Struktur?
    • Ich habe alle Ihre CSS innerhalb der html-Datei nur um es zu testen für jetzt und das hat nicht funktioniert. Sie könnten versuchen, es umzusetzen, direkt in meinem code (ich bin wahrscheinlich etwas fehlt, doof wie immer): http://pastebin.com/T32XEk1F
    • Die Klassennamen in der CSS gepostet, dass ich nicht passen mit denen von bootstrap. Sie müssen es anpassen. Ich habe eine sehr einfaches Beispiel von Ryan Fait website, um Ihnen zu zeigen, wie es funktioniert.

    InformationsquelleAutor JSW189
  2. 1

    Versuchen, ändern Sie die Fußzeile element und der letzten hr-element wie diesem:

    <footer style="position:fixed; left:0px; right:0px; bottom:0px;
      background:rgb(255,255,255); text-align:center;">
  <hr>
  <p>&copy; Company 2012</p>
</footer>

    Ich denke, dass dies mehr oder weniger Ihr problem löst. Es funktioniert nicht, genau wie der footer an http://ryanfait.com/sticky-footer/, aber soweit ich Ihre Frage verstehe, was Sie wollen.

    PS: Die CSS sollten natürlich in der CSS-Datei.

    InformationsquelleAutor matsolof
Schreibe einen Kommentar