title: Make a footer but in every page different with CSS in a printed document
body: <p>I would like to print a different footer on each page of my document (because I have to display the page number).</p>
  
  <p>I tried this CSS <strong>but it put every footer one over the other instead of changing it on every page</strong>: </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>{{# each array}}
      &lt;section class="row"&gt;
          ...
          &lt;div class="col-xs-12"&gt;
             ...
          &lt;/div&gt;
          &lt;footer&gt;
              &lt;small&gt;     Page {{math @index '+' 7 }} &lt;/small&gt;
          &lt;/footer&gt;
      &lt;/section&gt;
  {{/each}}
  </code></pre>
  
  <p>So the final html would be:</p>
  
  <pre><code>   &lt;section class="row"&gt;
          ...
          &lt;div class="col-xs-12"&gt;
             ...
          &lt;/div&gt;
          &lt;footer&gt;
              &lt;small&gt;     Page 8 &lt;/small&gt;
          &lt;/footer&gt;
      &lt;/section&gt;
     &lt;section class="row"&gt;
          ...
          &lt;div class="col-xs-12"&gt;
             ...
          &lt;/div&gt;
          &lt;footer&gt;
              &lt;small&gt;     Page 9 &lt;/small&gt;
          &lt;/footer&gt;
      &lt;/section&gt;
     &lt;section class="row"&gt;
          ...
          &lt;div class="col-xs-12"&gt;
             ...
          &lt;/div&gt;
          &lt;footer&gt;
              &lt;small&gt;     Page 10 &lt;/small&gt;
          &lt;/footer&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks</p>