Add margins without overlapping for a fixed footer in print media css

Question

I need to add a margin on a fixed footer in a web page in print media. I made the footer fixed by adding fixed position but could not add the margins. The fixed footer overlaps with the content above.

The footer needs to have a minimum margin of 20 mm at the top so that it doesn't collide with the content above and a margin of 20 mm at the bottom.

Here is the demo page : https://storage.googleapis.com/cwsogbl/index.html

Can anyone help with this?

Answer 1

The distance to the bottom should be adjustable using a bottom: 20mm setting instead of margin on the fixed-position footer. The free space above can probably be done with a relatively large padding-bottom on the html or body element (inside the @pmedia print rules) to create a free space under the footer at the end.

Answer 2

I was able to fix this using the concept from the blog https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a

The concept was to use table with thead and tfoot in combination of fixed position in header/footer.

For my use case, I set the height of thead to 0 and added the top margin with @page. For the footer I set some height to tfoot which will gurantee to reserve the space and then provided the same height to the fixed footer element and centered the content vertically.

See it in action here: Codepen

    .header-space, thead{
        height: 0;
    }

    @media print{
        @page{
            margin-top: 10mm;
            margin-bottom: 0;
        }
        .header {
          position: fixed;
          top: 0;
        }
        .footer {
          position: fixed;
          bottom: 0;
        }
        .footer, .footer-space {
            height : calc(20mm + 34px);
        }
    }