将页脚Div放置在“最后一页”的底部（在屏幕上并打印）

Question

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 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!

Answer 1

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