CODEWITHSUNDEEP
cssprintingfootercss-paged-mediacss-print
Assembler
Assembler

Reputation: 794

Footer on last printed page

I have a web page that a client would like to print, and the part I'm having trouble getting my head around is to get the footer to sit at the bottom of the last printed page, not just when the content ends

I tried something like 

 #printfooter{display: block; position:fixed; bottom: 0;}

but it displayed the footer at the end of each page.

Maybe Im asking a bit too much from CSS... Is it doable?

I'm thinking I should just go crazy with <br />'s (^_^)

Upvotes: 15

Views: 22003

Answers (2)

DurandA
DurandA

Reputation: 1550

Yes, it is possible to have a footer appear only at the bottom of the last printed page using CSS, though it requires some advanced features that are not fully supported in all browsers yet.

Your current approach with as below places the footer at the bottom of every page because position: fixed in print media repeats the element on each page.

To place the footer only on the last page, you can use the CSS Generated Content for Paged Media Module, specifically the running() and element() functions. Here's how you can do it:

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

Explanation:

  • The position: running(footer); collects the footer element to be used in the page margin boxes.
  • The @bottom-center at-rule places the collected footer element at the bottom center of the page.
  • Since the footer element appears at the end of your document, it only shows up on the last page.

However, as of 2024, most browsers do not fully support these CSS features. To overcome this limitation, you can use Paged.js as a polyfill. Paged.js is a library that implements the CSS Paged Media Module and the CSS Generated Content for Paged Media Module, allowing you to use advanced printing features in the browser.

To use Paged.js, include the following script in the <head> of your HTML document:

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

Upvotes: -1

Gumbo
Gumbo

Reputation: 655239

Try to position the body relative and the footer absolute:

body {
    position: relative;
}
#printfooter {
    position: absolute;
    bottom: 0;
}

With CSS 3 Paged Media module you could use something like this:

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

Upvotes: 3

Related Questions