Position Fußzeile Div unten auf der letzten Seite (auf dem Bildschirm und Druck)

Question

Ich habe eine Anforderung, ein Div auf der Unterseite der letzten Seite beim Drucken zu positionieren. Überlege, dass ich eine Seite wie folgt eingerichtet habe.

 
[div id=Header] 
[/div] 

[div id=Lines] 
    x Number of lines that could potentially span 1 or more pages 
[/div] 

[div id=Footer style="position: absolute; bottom: 20px; left: 4px; right: 4px;"] 
[/div] 

Keine dieser Code ist in Ordnung, wenn es ein paar Zeilen auf der Seite sind, aber wenn es mehr als nur ein paar der Fußzeile überlappt dann einige der Linien. Ist es in CSS möglich, die Fußzeile am unteren Rand der Seite zu fixieren, sondern am unteren Rand der zweiten Seite anzuhängen, wenn die Zeilen die erste Seite füllen.

Ich denke, es ist die absolute Position, die das Problem verursacht. Hat jemand anderes dies getan, das eine Alternative hat? Ich konnte keine andere Antwort mit einer Lösung finden, die für mich funktionierte

ps. Sorry über die eckigen Klammern, konnte nicht herausfinden, wie man das Markup sonst bekommen kann!

Answer 1

Ich glaube, Sie dieses Ergebnis erhalten möchten: http://jsfiddle.net/steweb/QAs78/

Um die Fußzeile Aufenthalt am Boden zu lassen, müssen Sie Ihre Elemente wickeln, und stellen Sie die aktuelle Wrapper-Stil:

#wrapper{ 
    min-height:100%; 
    position:relative; 
} 

Denken Sie daran, auch zu setzen

html,body{ 
    padding:0; /* to avoid y scrollbar */ 
    height:100% 
}