CSS Printing - Page Break Inside with Headers and Footers

: Category: Cascading Stylesheets; 22 February 2019; Hits: 12016

What?
I saw a lot of articles that would cover this but I wanted an example which includes headers and footers and how to get an automatic page-break-inside to not overlap these. Fine on screen but this is obviously for when it comes to printing.

Why?
I needed to create a template in HTML where the first page is a cover page (background image filling the page with a logo floating at the centre) and the next page has a table which is of variable length. Fine when the table was short and didn't have many rows. But the client will pick up the phone to you when the table has too many rows to fit on one page, and this overlaps onto the next, covering the footer and header...

How?
By spending a lot of time spinning on my chair and twiddling my thumbs...

Firstly, set the page CSS: This will allow 3cm from the top for a header and 2cm from the bottom for a footer.

copy raw

@page
        {
            size: A4;
            margin: 3cm 1cm 2cm 1cm;
        }
        @page :first {
            size: A4;
            margin: 0cm 0cm 0cm 0cm;
        }

@page
{
size: A4;
margin: 3cm 1cm 2cm 1cm;
}
@page :first {
size: A4;
margin: 0cm 0cm 0cm 0cm;
}

If this works for you then brilliant because it didn't work for me... I guess I'm special, this is what I had to do:

copy raw

@page
        {
            size: A4;
            margin: 0cm 0cm 0cm 0cm;
        }
        .page {
            page-break-after: always;
            width:21cm;
            height:29.7cm;
            margin:0mm 0mm 0mm 0mm;
            padding:3cm 1cm 2cm 1cm;
            display: table;
        }