CSS Footer am Ende der Seite

Ich eine Fußzeile möchten, Sie bleiben am unteren Rand der Seite. So habe ich ein DIV mit min-heigt:100% und ein DIV ohne Höhe-Einstellung für das animieren von ajax-content laden:

HTML:

<div class="main">
    <div class="header navi>…</div>
    <div class="animater">
        <!-- content goes here -->
        <div class="footer">
            <!-- footer stuff goes here -->
        </div>
    </div>
</div>

CSS:

.main {
    min-height:100%;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
.header {
    //height, width, margin, position
}
.animater {
    //empty
}
.footer {
    bottom:0px;
    position:absolute;
}

Als ich die Seite geladen und der Inhalt ist viel kleiner als mein Bildschirm funktioniert alles perfekt. Die Fußzeile wird am unteren Rand des Bildschirms, als sollte.

Ich bin jetzt animieren die animater mit CSS-keyframes. Wenn der out-animation endet, bin ich ersetzt den Inhalt animater und enimate es wieder. Wenn der Inhalt kleiner ist als der Bildschirm wieder, der Fuß ist an der Spitze meiner animater. Aber wenn ich die Seite neu zu laden "manuell" (also so, dass der Inhalt nicht animiert), die Fußzeile wird richtig positioniert.

So, ich brauche einen footer, der sitzt an der Unterseite der Inhalt unabhängig von der Höhe der Inhalte hat. Ich kann den animater min-height 'Ursache es ist nicht an der Spitze der Seite.

  • Versucht, so etwas wie CssStickyFooter noch? PS. Hilft um zu wissen, welche Browser Sie brauchen/wollen, zu unterstützen.
  • Wenn Sie animieren, keyframe, ist es säumigen zurück, um ein position:relative wieder? Wenn Sie es wieder am Ende des Keyframes, funktioniert es Hilfe?
  • NÖ. Die Einstellung der relativen macht der Fußzeile kleben an der Unterseite des animater. Aber die animater nicht haben, um den unteren Rand Der Seite. Ich würde gern unterstützt die meisten gängigen Browsern wie Safari, FF und wenn möglich auch IE10+
InformationsquelleAutor Julian F. Weinert | 2013-01-21
  1. 4

    Diesem Beispiel habe ich gemacht, zeigt die minimale css nötig, um eine Fußzeile unten bleiben. http://jsfiddle.net/meBv3/

    Den HTML -

    <div class="wrapper">
<div class="page">
    page here
</div>
<div class="footer">
    Content for  class "footer" Goes Here
</div>
</div>

    CSS

    /* THIS IS THE MIN STYLE NEEDED TO GET THE FOOTER TO STAY DOWN */

html, body{
height:100%;    /* to keep .footer on bottom */
margin:0;   /* to get rid of scroll bar, because (100% + default margin = scroll) */

}
.wrapper {
min-height: 100%;   /* to keep .footer on bottom */
position: relative; /* must be relative or .footer will cover content */
}
.page {
padding-bottom:2.2em;   /* MUST have padding on the bottom => .footer, or .footer will cover content 8*/

}
.footer {
position: absolute; /* to keep .footer on bottom */
bottom: 0px;    /* to keep .footer on bottom */
height:2em; /* height must be smaller then .page's bottom padding */

}
    • Wie ich schon in meiner Frage, ich hab schon das es funktioniert. Aber das problem ist, wenn die Höhe der der Inhalt dynamisch ändert. Dann wird die Fußzeile nicht auf den Boden kleben nicht mehr.
    • mit meinem code die footer immer unter der page
    InformationsquelleAutor X-27
Schreibe einen Kommentar