创建页脚，但在每个页面中与打印文档中的CSS不同

Question

I would like to print a different footer on each page of my document (because I have to display the page number).

I tried this CSS but it put every footer one over the other instead of changing it on every page :

section {
    page-break-before: always;
    margin-top: 30px;
    page-break-inside: avoid;
}
footer {
    bottom:0px;
    height:30;
    right:0%;
    left:0%;
    position:fixed!important;
    position:absolute;
    width=100%;
    top:expression((0-(footer.offsetHeight)+
(document.documentElement.clientHeight?
document.documentElement.clientHeight:
document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop))+'px');
    text-align:center;
    visibility:visible;
}

Html

{{# each array}}
    <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page {{math @index '+' 7 }} </small>
        </footer>
    </section>
{{/each}}

So the final html would be:

   <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page 8 </small>
        </footer>
    </section>
   <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page 9 </small>
        </footer>
    </section>
   <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page 10 </small>
        </footer>
    </section>

How can I do it with CSS? I don't care if is not supported on every browser but it has to work in Chrome.

Thanks

Answer 1

If you can change your HTML a bit, then you can do this with HTML data attributes and css

 small::after { content: attr(data-page); } 

 <footer> <small data-page="1">This is page number </small> </footer> 

Answer 2

After hours of researching I found how to do it: CSS:

section {
    position: relative; 
    height: 95%;
}

Html:

<section>
    <div style="position: absolute; bottom: 0px; right:20px;"><small>Page {{page}}/{{totalPages}}</small></div>
</section>

Answer 3

try this:

html:

<div class="divFooter">{{page}}/{{totalPage}}</div>

css:

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