How to use HTML to print header and footer on every printed page of a document?

css header printing stylesheet footer

587,134

Solution 1

If you take the element that you want to be the footer and set it to be position:fixed and bottom:0, when the page prints it will repeat that element at the bottom of each printed page. The same would work for a header element, just set top:0 instead.

For example:

<div class="divFooter">UNCLASSIFIED</div>

CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Solution 2

I believe the correct answer is that HTML 5 and CSS3 have no support for printing page header and footers in print media.

And while you might be able to simulate it with:

tables
fixed position blocks

they each have bugs that prevent them from being the ideal general solution.

Solution 3

I just spent the better half of my day coming up with a solution that actually worked for me and thought I would share what I did. The problem with the solutions above that I was having was that all of my paragraph elements would overlap with the footer I wanted at the bottom of the page. In order to get around this, I used the following CSS:

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}

The page-break-inside for p and content-block was crucial for me. Any time I have a p following an h*, I wrap them both in a div class = "content-block"> to ensure they stay together and don't break.

I'm hoping that someone finds this useful because it took me about 3 hours to figure out (I'm also new to CSS/HTML, so there's that...)

EDIT

Per a request in the comments, I am adding an example HTML document. You'll want to copy this into an HTML file, open it, and then choose to print the page. The print preview should show this working. It worked in Firefox and IE on my end, but Chrome made the font small enough to fit on one page, so it didn't work there.

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>
      Example Document
    </h1>
    <div>
      <p>
        This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
      </p>
    </div>
    <div>
      <h3>
        Example Section I
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
        
        Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
      </p>
    </div>
    <div class="content-block">
      <h3>Example Section II</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
      </p>
    </div>
    <footer>
      This is the text that goes at the bottom of every page.
    </footer>
  </body>
</html>

Solution 4

The magic solution is really putting everything in a single table.

thead: this is for the repeated header.
tfoot: the repeated footer.
tbody: the content.

and make a single tr, td and put every thing in a div

CODE::

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
            ...
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           ...
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            ...
            </div>
          </td>
       </tr>
     </tbody>
</table>

table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
}

extra: to prevent overlapping with multiple pages. like:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

which results in overflow that will make things overlap with the header within the page breaks..

so >> use: page-break-inside: avoid !important; with this class article.

table.report-container div.article {
    page-break-inside: avoid;
}

Solution 5

Muhammad Musavi's comment is the best answer, so here it is surfaced as an actual Answer:

thead/tfoot are automatically repeated on the top and bottom of each page. However, tfoot isn't sticky to the bottom of the last page.

position: fixed in print will repeat on each page, and the footer will stick to the bottom of all pages including the last one - but, it won't create space for its contents.

Combine them:

HTML:

<header>(repeated header)</header>

<table class=paging><thead><tr><td>&nbsp;</td></tr></thead><tbody><tr><td>

(content goes here)

</td></tr></tbody><tfoot><tr><td>&nbsp;</td></tr></tfoot></table>

<footer>(repeated footer)</footer>

CSS:

@page {
    size: letter;
    margin: .5in;
}

@media print {
    table.paging thead td, table.paging tfoot td {
        height: .5in;
    }
}

header, footer {
    width: 100%; height: .5in;
}

header {
    position: absolute;
    top: 0;
}

@media print {
    header, footer {
        position: fixed;
    }
    
    footer {
        bottom: 0;
    }
}

There are a lot of niceties you can add in here, but I've intentionally slashed this to the bare minimum to get a cleanly rendering header and footer, appearing once on-screen and at the top and bottom of every printed page.

https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a

View more solutions

587,134

Author by

Nhan

Make the Web a better place.

Updated on December 16, 2021

Comments

Nhan over 2 years

Is it possible to print HTML pages with custom headers and footers on each printed page?

I'd like to add the word "UNCLASSIFIED" in Red, Arial, size 16pt to the top and bottom of every printed page, regardless of the content.

To clarify, if the document was printed onto 5 pages, each page should have the custom header and footer.

Does anybody know if this is possible using HTML/CSS?
- Peter Krauss almost 12 years
  
  See Why use XSL-FO instead of CSS2, for transform HTML into good PDF? question and answers.
- Daniel over 11 years
  
  This is a question that I try to answer for a long time. Looks like the key to the problem would be css elements like page, top-center, content, position: running(..). How it could look if browsers would fully support @page: techrepublic.com/blog/webmaster/… alistapart.com/articles/boom alistapart.com/articles/building-books-with-css3 Some open issues: code.google.com/p/chromium/issues/detail?id=47277 bugs.webkit.org/show_bug.cgi?id=15548
- DoctorDestructo almost 10 years
  
  I have posted a Chrome-compatible solution here that will add a running header to documents that don't contain overly-large expanses of text. Still no solution for footers, though.
- Muhammad Musavi about 5 years
  
  Combinative Solution: both pisition: fixed and thead tbody tfoot techniques have disadvantages so you should combine them, read more here.
- Hatzen about 4 years
  
  @MohammadMusavi is right after hours of stumbiling around i found this article (medium.com/@Idan_Co/…) which explains it in detail and it works like a charm! Someone should consider writing an answer for it
Fenton almost 15 years

+1 for using display rather than visibility - visibility : hidden leaves reserved space, whereas display : none collapses the whitespace, saves paper and makes planet Earth survive longer.
NotMe almost 14 years

-1: although a good example of a print style sheet, it doesn't deal with the issue of when content overflows a page.. As is, this would only show the footer on the last page.
tina Miller about 13 years

Doesn't seem to work if you have an element which spans two pages (pre in my case) - the footer will be overwritten on it.
Infotekka about 13 years

Yes unfortunately that is true, since you are using fixed positioning on the footer element it will overlap any elements that run under it. You may be able to do some tweaking with your margins and try to get the footer to position outside of the margin of the content area that your pre is in.
Sakie almost 13 years

It seems like webkit browsers don't support this properly. Correct me if I am wrong though!
Tyson of the Northwest almost 13 years

This doesn't seem to repeat on every page.
Infotekka almost 13 years

@Tyson it is repeating for me in a simple test. What is your environment? Are you making sure to declare a doctype?
Tyson of the Northwest almost 13 years

What doctype should I be declaring it as? Something other than <!DOCTYPE html>?
Infotekka almost 13 years

That should be fine. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> is what I have in my test page.
Elliot Yap over 12 years

i did a header and it repeated. but it overlap with content due to fixed position. i can only adjust the first page content but the following still overlap.. any solution?
chharvey over 12 years

This did not work for me, I'm using Chrome 15.0. All it does is print the element where it would be on the screen, e.g. in the middle of the page, if that's where I scrolled to. It certainly doesn't print on every page.
Tokimon about 12 years

It didn't work for me either. I got the same idea, but it didn't work in any browser i tried :/
Primoz Rome over 11 years

I have found this solution only working one. Haven't tested all browsers but it works in Firefox!
Jaro about 11 years

I tested it on Firefox and Chrome. On Firefox this solution works, on Chrome not.
DWolf almost 11 years

this works in all browsers and in asp (which has some crazy issue with page footers) Use this i say.
rainabba over 10 years

This does not print a header and footer on each page. It specifies many "pages" with best guess. If you don't know your document height (number of pages), it's useless.
rainabba over 10 years

The provided demo doesn't even work (pages don't break, bleed on to each other, etc.), let alone with more universal content.
Paul Sweatte over 10 years

@rainabba if the document was printed onto 5 pages
sparkalow over 10 years

I should have clarified. The provided links are examples of a javascript library for laying out content across containers and is not setup for printing. This link was meant to be an example of using js to layout content within specified boundaries. I have used js as a rendering engine with wkhtmltopdf to create cookbooks from database content.
mspisars about 10 years

bugs.webkit.org/show_bug.cgi?id=17205 Ticket open since 2008... no progress.
user2847643 over 9 years

Don't trust the other answers. They might work for special cases but will just horribly break in general. There is no reliable solution until @page margin boxes are implemented in major browsers. See: en.wikipedia.org/wiki/…
E_the_Shy over 8 years

Everyone commenting that it didn't work, how about providing a browser version or some further information about what you did?
Aamir Shahzad over 8 years

@Skelly can you please mention the environment it doesn't work for me either I have firefox 43.0.1 and chrome 47
C0ZEN over 8 years

@DWolf First comment give me a huge hope. And you destroy me in one sentence just after that.
Ricardo almost 8 years

Repeating table headers on printed pages was fixed on Chrome on Jun 5, 2016. I have the version 51.0.2704.103 on Mac OS X and it works.
JoeTron almost 8 years

@Infotekka The page I was working on had no DOCTYPE and adding that (with "position:fixed" and "top:0") got me the desired behavior. Now I just need to figure out how to make it not overlay other items on the page.
igorsantos07 over 7 years

that was just an example. should not be used to precisely guide your ans.. workaround.
Paul Sweatte over 7 years

@igorsantos07 should does not mean don't. If(just an example) the word if(just an example) is used by the OP, and if(just an example) the OP is no longer active, is it better to provide a specific answer if(just an example) there are already generic answers and if(just an example) the languages(HTML/CSS) and specifications in question are designed to avoid indirection and simplify documentation? If(just an example) so, why? Otherwise, why not?
njfife over 7 years

I actually have had this work in Chrome. I didn't have it work in a very old version of linux based Chromium but Chrome worked just great.
pixparker over 7 years

this will not appear on every page. but just one!
Mehdi Dehghani over 7 years

2017 and still doesn't work in Chrome! but works in Firefox
Tony over 7 years

Yes, the headers and footers are printed on every page but they overlap the content of the page.
Eric Kigathi about 7 years

Thanks for this, I only wish there was a sample HTML document in the answer to make it easier.
tblznbits about 7 years

@EricKigathi Noted. I'll try my best to get around to that this weekend and edit my answer.
tblznbits about 7 years

@EricKigathi Missed my weekend deadline, but I have added the example HTML code. Hope that helps!
Eric Kigathi about 7 years

Thanks @brittenb - much appreciated, you are forgiven for missing the deadline ; )
Fr0zenFyr about 7 years

@MehdiDehghani: my bad.. taking off the comment
Narayan almost 7 years

Header and footer not showing on every page. I want this on every page. any solution?
Greg Blass almost 7 years

The question is about printing.
Avatar over 6 years

Unfortunately I have to upvote this one. Even though we have year 2018 … why the hack don't they give us a @footer with content:"stuff" or alike.
Sundara Prabu over 6 years

this works as long as our thead and tfoot doesn't have many <tr>rows, looks like thead and tfoot has a max-height set , in my case I had 9 <tr> rows in thead, when I reduced it to 3 or 5 it works
Samuil Petrov about 6 years

Works for me on latest Chrome & Firefox, not on IE/Edge though (how surprising).
Fei Xue - MSFT about 6 years

not work for the second page for the header. still overlap
tblznbits about 6 years

@Fei Xue - unfortunately, the solution as provided only deals with the footer, and not the header. You'd have to tweak the code a bit to get it to apply to your needs.
Quuxplusone about 6 years

This approach doesn't work on Safari (11.1.1), as far as I can tell. In the PDF, the red footer text shows up only once in the middle of the second page, overwritten on top of the body text.
RDev almost 6 years

thank you, incredible useful for printing in Electron apps, since print to pdf functionality laks header and footer options now
Dexterslab almost 6 years

Hello, I am facing issue with header. The header content is overlapping on page 2 onwards. Any suggestion please??
tblznbits almost 6 years

@Dexterslab as stated in previous comments, this code deals specifically with the footer, as can be seen by the fact that header is never mentioned in the CSS. You will need to modify it to handle the header.
Dexterslab almost 6 years

Yes I modified it but still having issue. I was wondering if anyone can suggest a solution for header if they made it work with header please?
dizad87 almost 6 years

it worked for me but the problem is that if there's text behind it, it will overlay, instead of push the text down
Irikos over 5 years

That's a neat trick! Thead works like a charm, but tfoot doesn't. Any ideas on how to make it work?
Irikos over 5 years

Tfoot works in browsers, but doesn't in MS word. Thead works in both.
Mendy over 5 years

There is actually a specification in the making at W3C to address these scenarios.
Altimus Prime almost 5 years

This solution is working in chrome, explorer, edge and firefox on my system. If it isn't working for you it's because you didn't add the <link rel="stylesheet" href="layout.css"> for where 'layout.css' is the path to your stylesheet. brittenb's html doesn't link the two.
markg almost 5 years

I think this is the best answer. The problem is browser vendors. You can make good-looking PDFs outside the browser using CSS Paged Media with commercial tools like these (and there are others): Antenna House antennahouse.com/formatter, Prince princexml.com.
Arseniy-II almost 5 years

Best solution here. A few notes: Flexbox may cause some unexpected behavior. If you want footer on lsat page to be a the bottom you will need that solution and solution from @Infotekka combined.
aldobsom over 4 years

@TysonoftheNorthwest you also need to add position: relative to the parent of the footer.
Johnny over 4 years

Unfortunately, if there is a long element, the first page will be blank and the next page will have footer overlap.
Newclique over 4 years

I'm making this as a comment, not an answer, so please don't hit me with "OP didn't ask...". One possibility is to use a PDF generator that allows you to set fixed headers and footers and render your view into this format when the user decides they want a real "print preview" or printed document. HTML is for screen rendering and screens don't have a concept of pages. PDF might as well stand for printed document format (I know, it doesn't) and is a modality where page headers and footers are relevant. NReco.PdfGenerator is very affordable for business purposes or free to try.
Jonathan B. almost 4 years

Is there a reference you are aware of that supports this statement? I don't doubt you ... I'm just looking to find out what else in the css-page-3 standard is supported by Chrome.
Zze almost 4 years

@JonathanB. I do not have a resource to share for this. I just tried to find something and could not. The only reason I referenced Chrome73+ in the post is because that is the browser I tested in.....
mindplay.dk almost 4 years

To those who complained about the footer overlaying the content: put a div around the content and add margin-bottom to reserve some space for the footer. (Hopefully your footer has a fixed height - if not, you're out of luck...)
Chloe over 3 years

This doesn't work for single line <p> elements. If your single line paragraph happens to land at the bottom of the page, it will be overwritten by the footer still. Especially bad for contracts.
Chris Moschini over 3 years

This does not work in any browser and at least in Chrome there has been no effort or interest in supporting it, despite a bug being filed in 2012, 8 years ago. caniuse.com/mdn-css_at-rules_page_page-margin-boxes bugs.webkit.org/show_bug.cgi?id=85062
Sebastian over 3 years

Will this solution work for header with height more than. 250px. Dynamic height values / auto height
Barney Szabolcs over 3 years

Yes! Also, great job with the article and the demo, thanks @Chris!
chevin99 over 3 years

Wow, took a while to find this but it is gold 🥇! I wish I had 400 more votes to add to this to bump it up to the top. Scrolling down to this answer paid off. Thanks 👏
Nikhil Singh about 3 years

Thank you so much, it worked just perfectly. The article and the demo attached helped a lot.
Mike Wright about 3 years

THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU
Nikhil Singh about 3 years

@Sebastian having similar issues with the overlapping header beyond 250px height, do you have a solution for it?
Sebastian about 3 years

@NikhilSingh No solutions. Height limitation of 250px is a known accepted limitation of thead
Nikhil Singh about 3 years

Thanks for replying @Sebastian, did you find any other way of the printing head and footer on every page? With a bit more flexibility in the context of how <div>'s shrink or expand with margin of the page
Sebastian about 3 years

I ended up with a solution of repeating header and footer for all pages using CSS page-break options Also used some algorithms to decide how many items in table each page can afford
Nikhil Singh about 3 years

Any solution if the thead height is greater than 250px? The header seems to stop repeating if we cross height of 250px
Andrew Fox about 3 years

This is working really, really great for me (thank you!). The only problem I'm having is the header and footer size is too small on every page but the first page, causing the content to overlap, any idea what to do there? Also, I'm interested to know why you've split the styling between multiple @media print{} actions?
Nikhil Singh about 3 years

@FeiXue-MSFT did you find any relevant solution to the problem of overlapping header on the second page, I am facing similar issue!
Pankaj Wanjari almost 3 years

tfoot td { height: .5in; } the trick worked for me, thanks @Chris for the solution
Alexander Gräf almost 3 years

Not sure why this has so many upvotes. It produces incredibly ugly layouts, where the headline might be the only element on an otherwise blank page, and the text not overlapping the footer is only by chance depending on the amount of text. Putting in more text makes it overlap the footer.
Alexander Gräf almost 3 years

And somehow Chrome and Firefox managed to mess it up again. Chrome 92 and the example in the linked article starts with two pages with only the header and footer, but no content. In Firefox 91 on the other hand, the footer is completely missing in the print preview.
br3nt over 2 years

How do you prevent from content being printed underneath the footer???