Нижний колонтитул и верхний колонтитул перекрывают содержимое

Question

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

Это мой HTML-код:

<div id="header">
    <table>
        <tr>
        </tr>
        ...
    </table>
</div>
<div id="main">
    <table>
        <tr>
            HERE DYNAMIC CONTENT
        </tr>
    </table>
</div>
<div id="footer">
   <p>FOOTER</p>
</div>

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding-top: 340px;
}
#main {
    width: 100%;
}
#header {
    width: 100%;
    display: block;
    position: fixed;
    top: 0;
}
#footer {
    width: 100%;
    display: block;
    position: fixed;
    bottom: 0;
}

Когда я печатаю этот документ с Chrome,верхний колонтитул первой страницы является окей, но нижний колонтитул перекрывает последнюю строку #main, а на второй странице верхний и нижний колонтитулы перекрывают мой контент.

Когда я пытаюсь добавить поле или отступы в #main илиВ основном это работает только на первой странице, проблема появляется на всех следующих страницах, начиная со страницы № 2.

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

Я уже пытался работать с одной и той же таблицей без успеха

Спасибо за помощь