How to offset the main part of the content from the fixed header and footer in generated pdf?

Question

I have a problem with offsetting fixed header and footer in generated pdf (styled with tailwind). I need repeating header and footer on every generated page, so I fixed them. The problem is that the main text overlaps the fixed footer and the header. Any ideas please? Generation to pdf is provided by the chromium-browser.

<!-- Header -->
<header class="flex items-center justify-between gap-2 font-bold text-xl leading-none w-full fixed top-0">
        @if($invoice->logo && $invoice->logo_enable)
            <img src="{{$invoice->logo->url}}" class="max-w-[70px]">
        @else
            <div></div>
        @endif
        <div>
            @if($invoice->total_price < 0)
                Dobropis @if($invoice->vat) @endif
            @else
                Faktúra @if($invoice->vat) @endif
            @endif
            <span class="text-[#3094a9]">{{$invoice->invoice_number}}</span>
        </div>
</header>

<main>Long main content...</main>

<!-- Footer -->
<footer class="text-center text-[11px] leading-3 w-full fixed bottom-0">
    <div class="text-gray-400">{{$invoice->or}}</div>
</footer>

Thank you very much for help.