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.

Manoeuvre

Answer 1

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.

Faun

above style i have added inside media style only – Manoeuvre

media="print" is what is important – Faun

Thanks for your time. <link rel="stylesheet" type="text/css" href="css/print.css" media="print"> i have added all print related styles inside this – Manoeuvre

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. – Manoeuvre

page:last { @bottom-center { content: "…"; } } how can i include footer element here ? – Manoeuvre

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. – Faun

Answer 2

This is nowadays possible using CSS Generated Content for Paged Media Module using running elements.

@page {
    @bottom-center {
        content: element(footer);
    }
}

.last-page-footer {
    position: running(footer);
}

<p>I'm the content. Extend me until I fit on several pages.</p>

<div class="last-page-footer">
    I'm the footer
</div>

As of 2024, these attributes are no properly supported by browsers. Until they are supported, you can use Paged.js as a polyfill:

Paged.js is a polyfill for some CSS properties made to print HTML from the browser. The W3C CSS modules that Paged.js aims to implement are the following:

• CSS Paged Media Module Level 3
• CSS Generated Content for Paged Media Module
• CSS Fragmentation Module Level 3

To use Paged.js as a polyfill, copy the line below to the head of your document.

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

Vanscoy