Position Footer Div at bottom of Last Page (on screen and print)

I have a requirement to position a div on the bottom of the last page when printing. Consider I have a page set up as follows.

[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]

No this code is fine if there are a few lines on the page, but if there are more than just a few the footer then overlaps some of the lines. Is it possible in CSS to fix the footer to the bottom of the开发者_StackOverflow page, but to attach to the bottom of the second page if the lines fill the first page.

I think its the position absolute that is causing the problem. Has anyone else done this that has an alternative? I couldnt find another answer with a solution that worked for me

ps. sorry about the square brackets, couldnt work out how to get the markup in otherwise!

I think you want to obtain this result: http://jsfiddle.net/steweb/QAs78/

To let the footer stay at the bottom, you need to wrap your elements, and set the current wrapper style:

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

Remember also to set

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