Ich möchte, dass eine Fußzeile am Ende der Seite bleibt. Also habe ich einen DIV mit erstelltmin-heigt:100% und ein DIV ohne Höheneinstellung zum Animieren eines Ajax-Inhalts wird geladen:

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;
}

Wenn ich die Seite lade und der Inhalt viel kleiner als mein Bildschirm ist, funktioniert alles perfekt. Die Fußzeile befindet sich vermutlich unten auf dem Bildschirm.

Ich animiere jetzt dieanimater Verwenden von CSS-Keyframes. Wenn die Out-Animation endet, ersetze ich den Inhalt vonanimater und beleben Sie es wieder. Wenn der Inhalt kleiner als der Bildschirm ist, befindet sich die Fußzeile oben in meinemanimater. Aber wenn ich die Seite "manuell" neu lade (damit der Inhalt nicht animiert wird), ist die Fußzeile richtig positioniert.

Ich brauche also eine Fußzeile, die sich in jeder Höhe am unteren Rand des Inhalts befindet. Ich kann dem Animator keine minimale Höhe geben, da er nicht oben auf der Seite steht.