CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromeprinting
Serhii Matrunchyk
Serhii Matrunchyk

Reputation: 9363

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

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!

Upvotes: 0

Views: 920

Answers (1)

cgatian
cgatian

Reputation: 22984

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>

Upvotes: 1

Related Questions