Chrome print preview: any text on the bottom of every page

Question

I'm designing a report pages and I've lost with this issue. Does anyone know how to put any text on the footer of every page being printed?

I've managed how to do it on the last one or on the first one. But not every.

This is code I have.

Full-page preview (Press Ctrl+P or Command+P).

Thank you for your all advices!

Possible duplicate of [Is there a way to get a web page header/footer printed on every page?](http://stackoverflow.com/questions/1722437/is-there-a-way-to-get-a-web-page-header-footer-printed-on-every-page) — Patrick Evans, Jan 20 '16 at 00:04
What excactly are you trying to do? Kepp one specific footer at the bottom of the page? Please add an example (html+css) where it is working and one where it isn't working — Mathias Haugsbø, Jan 20 '16 at 00:10
@MathiasHaugsbø, sounds like it. Sergii are you specifying the height of the report page? Do you need to support multiple formats outside of 8.5x11? — cgatian, Jan 20 '16 at 00:12
@cgatian Page format is static one. Correct, 8.5x11 is this I'm working with. — Serhii Matrunchyk, Jan 20 '16 at 07:13

score 1 · Answer 1 · answered Jan 20 '16 at 00:20

This probably wont help, but if you know the size of your reports (they dont change in height) you could try doing something like below. Use an @media query to only display the ::after content when printing.

http://jsbin.com/dabusal/1/edit?html,css,output

.report-page
{
  page-break-inside: avoid;
  page-break-after:always; 
  height:880px;
  position:relative;
  border:1px dashed;
}

.report-page.report-page--last
{
  page-break-after: avoid;
}

.report-page::after
{
  content:'Footer Content ©2016';
  position:absolute;
  bottom:0;
  left:0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class='report-page'>PAGE1</div>
   <div class='report-page report-page--last'>PAGE2</div>
</body>
</html>

Chrome print preview: any text on the bottom of every page

1 Answers1