How to put the page number to print with CSS in @ media print

Hello!

You must have already researched enough and found the two currently flawed methods that are in every corner of the web:

1. The method using @page with bottom-right. Link

2. The fixed footer method. Link

After much breaking my head, I think I managed to come up with something workable that is yet to be tested in all browsers. (For now I can guarantee it worked on the Chrome.)

Basically, mixing a little bit of each technique, I was able to create this shape that replicates a h3 in position: absolute and always throws the page to 100vh unless in the print view. (Going to the bottom of the page).

The rule I created for page numbering, in this case, being able to be adapted to the situation of each, was to create a page numbering for every 10 ps present in the text, which was the average of the example. In this way he does not number the most nor the least.

Unfortunately, this way it is not possible to put the total of pages, because what I did was simulate a total of pages based on number of paragraphs.

I leave here the work done: JSFiddle - no total pages

EDIT

Follows a new version capable of numbering the total pages: JSFiddle-with total pages

Valeu!

Hope I helped!

I do so

<style>
      #rodape::after { content: '| Página ' counter(page); }
      #rodape {
        /* string-set: footing content(); */
        running: footer;
        position: fixed;
        bottom: -10px;
        left: 0;
        right: 10px;
        height: 12px;

        /** Extra personal styles **/
        color: black;
        text-align: right;
        line-height: 12px;
        padding: 2em auto 0;
        max-width: 767px;
      }
      @page {
        size: A4 portrait;
              margin: 1.5cm 1cm 1.2cm;
        counter-increment: page;
         }
</style>

      <div id="rodape">
</div>