title: Add padding to @page on printing a html page?
body: <p>I want to print html page with footer on every page, the data is loaded dynamically.</p>
  
  <p>The problem is, the content of page overlaps the footer. I know this happens because I am using <code>position:fixed</code> on the footer.</p>
  
  <p>Here is my css.</p>
  
  <pre><code>@media print {
    page[size="A4"] {  
    width: 21cm;
    height: 28.7cm; 
    padding: 0 0 0 0;
    page-break-before: always;
    }
  
  .print {display : block;}
  
  footer {
      position: fixed;
      bottom: 0;
    } 
  
  }
  
  @page {
    margin-bottom: 0.3cm;
  }
  </code></pre>
  
  <p>Html code</p>
  
  <pre><code>&lt;body&gt;
    &lt;button class="print"&gt;Print&lt;/button&gt;
     &lt;page&gt;
       &lt;p&gt;Some very long text here.&lt;/p&gt;
     &lt;/page&gt;
    &lt;footer&gt;
       &lt;img scr="img/contact.jpg"&gt;&lt;/img&gt;
    &lt;/footer&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>Is it possible to add padding <code>@page</code> so that footer dose not over lap the content?</p>
  
  <p>Thank you.</p>