CSS Печать - элементы Div расположены на нескольких страницах, и я хочу добавить поля, чтобы текст не был скрыт под позициями Div

Question

Я пишу веб-приложение счета для клиента и пытаюсь обновить макет страницы, чтобы в случае переполнения текста в одном разделе печатная страница выглядела хорошо, а не ужасно, как сейчас.

Каждая страница при печати, если текст переполняет первую страницу, имеет верхний / нижний колонтитул (они содержат информацию о клиенте и цену в счете).

Проблема в том, что все выглядит хорошо, но текст в каждом элементе div Как мне решить эту проблему, скрытую под верхним и нижним колонтитулом?

Как вы можете видеть, элементы Div скрыты под верхним и нижним колонтитулами, я попытался применить поля / отступы, но он помещает их только вверху первой страницы и внизу последней страницы: /

Это всего лишь тестовая страница, так как я пытаюсь понять, как все будет выглядеть.

<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>

любая помощь будет чрезвычайно оценена:).