CSS Printing - Divs positioned over multiple pages and I want to add margins to prevent text being hidden under the positioned divs

Question

I'm writing an invoice webapp for a client and I'm trying to update the page layout so if the text in one section overflows then the printed page will look nice and not horrid like it does now.

Each page when printed if the text overflows the first page has a header/footer (these contain customer information and the price on the invoice).

The problem is everything looks good but the text in each div is hidden under the header and footer, how am I to fix this issue?

As you can see the Divs are hidden under the header and footer, i've tried applying a margin/padding but it only puts it at the top of the first page and bottom of the last page :/

This is only a test page as i'm trying to figure out how everything will look.

<style>
    .element { page-break-inside: avoid; page-break-after: auto; border:1px solid black; width:100%;height:330px; }

    .footer {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      background: gray;
    }

    .header {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      background: gray;
    }


    @media print
    {
      .footer {
        position: fixed;
        bottom: 10px;
        left: 0px;
        width: 100%;
        background: gray;
      }

      .header {
        position: fixed;
        top: 10px;
        left: 0px;
        width: 100%;
        background: gray;
      }

    }

    </style>

    <div class='element'>1</div>
    <div class='element'>2</div>
    <div class='element'>3</div>
    <div class='element'>4</div>
    <div class='element'>5</div>
    <div class='element'>6</div>
      <div class="footer">
        <table><tr>
          <td>one</td>
          <td>one test</td>
          <td>one test</td>
        </tr>
        <tr>
          <td>two</td>
          <td>two test</td>
          <td>one test</td>
        </tr>
        <tr>
          <td>three</td>
          <td>three test</td>
          <td>one test</td>
        </tr>
      </table>
    </div>

    <div class="header">
        <table><tr>
          <td>one</td>
          <td>one test</td>
          <td>one test</td>
        </tr>
        <tr>
          <td>two</td>
          <td>two test</td>
          <td>one test</td>
        </tr>
        <tr>
          <td>three</td>
          <td>three test</td>
          <td>one test</td>
        </tr>
      </table>
    </div>

any help would be extremeley appriciated :).