Ich möchte eine klebrige Fußzeile erstellenInnerhal ein absolut positioniertes div-Element.

Mein Ansatz war es, das Fußzeilendiv auch absolut zu positionieren - innerhalb eines zusätzlichen relativ positionierten "Seiten" -Divs (das den tatsächlichen Inhalt der Seite enthalten würde):

<div class="content">
   <div class="page">
      ...Some Lorem ipsum content...
      <div class="footer">Some footer</div>
   </div>
</div>

mit den folgenden Stilen:

.content {
     position: absolute;
     top: 60px;
     right: 0;
     bottom: 0;
     left: 0;
}

.page {
    position: relative;
    min-height: 100%;
}

.footer {
    height: 30px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

Diese Methode funktioniert nicht sehr gut, da die Fußzeile den Text auf einer bestimmten Ebene überlappt, wenn Sie die Größe der Seite ändern. Wie kann ich dieses überlappende Verhalten beseitigen?

Ein ausführlicheres Arbeitsbeispiel mit dem vollständigen Layout:https: //jsfiddle.net/8nrukse9/2