Print footer only in last printed page for media print

Question

I need to print multiple pages and footer needs to be print in last page bottom. I have add css for footer like this

footer {
     display: block;
     width:100%;        
     position:absolute;
     left:0;
     bottom:0px;        
}

Issue is footer is printing first page, but i need this on last page.

4dgaurav · Answer 1 · 2014-04-23T11:55:44.667

Include a stylesheet with your custom style for footer for print using media="print" as

<link rel="stylesheet" href="yourpath/footerstyle.css" media="print"/>

or

embed styles as in html

<style>
@media print {
   footer {
    display: block;
    width:100%;        
    position:absolute;
    left:0;
    bottom:0;        
   }
}
</style>

or

<style type="text/css" media="print">
    footer {
        display: block;
        width:100%;        
        position:absolute;
        left:0;
        bottom:0;         
    }
</style>

Try to position the body relative and the footer absolute:

<style type="text/css" media="print">
     body {
        position: relative;
     }
     footer {
        display: block;
        width:100%;        
        position:absolute;
        left:0;
        bottom:0;         
     }
</style>

or you could use something like this:

@page:last {
    @bottom-center {
        content: "…";
    }
}

CSS 3 Paged Media module

Edit

<style type="text/css" media="print">
     body {
        position: relative;
        margin: 0;
     }
     .page-section {

        /* Specify physical size of page, margins may vary by browser */

        height: 10 in; /* or give size as per proper calculation of the height of all your pages after which you want footer */
        position: relative;
     }
     footer {
        display: block;
        width:100%;        
        position:absolute;
        left:0;
        bottom:0;         
     }
</style>

add .page-section to relevant div / divs as per you want divs to print per page or directly add to body tag.

Thanks for your time. i have added all print related styles inside this — Nikesh Ponnen, Apr 23 '14 at 11:28
if content is more than one page then we need footer should move last page bottom. but as per this style footer coming first page bottom. — Nikesh Ponnen, Apr 23 '14 at 11:34
page:last { @bottom-center { content: "…"; } } how can i include footer element here ? — Nikesh Ponnen, Apr 23 '14 at 11:53
page:last { bottom-center { content: "…"; } }, this will help only to add content:"", for example if you use it as it is as page:last { @bottom-center { content: "This is footer"; } }, you will get "This is footer" at the bottom of last page. I made an edit try it. — 4dgaurav, Apr 23 '14 at 11:58

Print footer only in last printed page for media print

1 Answers1

Linked