To place a div at the last page only using print media query

Question

I have a container div which contains four div in it:

<div id="container">
    <div id="top"> this is top div</div>
    <div id="middle1"> this is middle1 div</div>
    <div id="middle2"> this is middle2 div</div>
    <div id="footer"> this is top div</div>
</div>

When I print this html, I want to place the footer div only at bottom of last page I print.

This is my media query:

@media print {
    #container{
        position:relative;
    }
    .middle1{
        display:inline-block;
    }
    .middle2{
        display:inline;
    }
    #footer{
        position:fixed;
        bottom:0;  
    }            
}

But this places the footer div at bottom of each page. I want the footer div only at bottom of last page.

Answer 1

Here is the solution: change the position: fixed; of footer to position: absolute;. You should read this article.

@media print {
    #container{
        position:relative;
    }
    .middle1{
        display:inline-block;
    }
    .middle2{
        display:inline;
    }
    #footer{
        position:absolute;
        bottom:0;  
    }            
}

Why position: absolute; ?

Because

1) #container is relative so the #footer will be absolute, but relative to the #container (as #container is position: relative;)

2) As #footer is bottom:0; so using position:absolute; we make sure that #footer always remains at the bottom of #container.