Problem with pagesize and offset

[TheExo]

im having issues with spacing and using the full height of a generated pdf.

ive set up my module for the documents like this (ignore the typeorm stuff):

import { Module, forwardRef } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { PDFModule } from '@t00nday/nestjs-pdf';
import path from 'path';
import { Angebot } from 'src/models/angebot.entity';
import { Kunde } from 'src/models/kunde.entity';
import { KundenModule } from '../kunden/kunden.module';
import { StandorteModule } from '../standorte/standorte.module';
import { AngeboteService } from './angebote.service';
import { DokumenteController } from './dokumente.controller';
import { DokumenteService } from './dokumente.service';
import { StandortToAngebot } from 'src/models/standortToAngebot.entity';
import { Vertrag } from 'src/models/vertrag.entity';
import { Standort } from 'src/models/standort.entity';
import { StandortToVertrag } from 'src/models/standortToVertrag.entity';
import { RechnungService } from './rechnungen.service';
import { Rechnung } from 'src/models/rechnung.entity';
import { StandortToRechnung } from 'src/models/standortToRechnung';
import { Storno } from 'src/models/storno.entity';
import { StornoService } from './storno.service';
import { GutschriftService } from './gutschrift.service';
import { Gutschrift } from 'src/models/gutschrift.entity';
import { CronJobService } from './cron.job';

@Module({
    imports: [
        PDFModule.register({
            isGlobal: true,
            view: {
                root: __dirname,
                engine: 'handlebars',
                extension: 'hbs',
            },
        }),
        KundenModule,
        StandorteModule,
        TypeOrmModule.forFeature([
            Angebot,
            Kunde,
            StandortToAngebot,
            Vertrag,
            Standort,
            StandortToVertrag,
            Rechnung,
            StandortToRechnung,
            Storno,
            Gutschrift
        ]),
    ],
    controllers: [DokumenteController],
    providers: [DokumenteService,GutschriftService,RechnungService, AngeboteService,StornoService,CronJobService],
})
export class DokumenteModule {}

within my service i have this generate function for generating the pdf with the chosen template

private readonly angebotTemplatePath = 'pdf/angebot';
    private readonly angebotOutputPath = `${path.join(
        process.cwd(),
        'pdf/angebote/',
    )}`;

    async generatePDFToFile(
        template: string,
        fileName: string,
        inputData: any,
    ) {
        const pdfOptions = {
            locals: inputData,
            format: 'A4', // Papierformat, z.B. 'A4', 'Letter', 'Legal', etc.
        };

        const outputPath = path.join(this.angebotOutputPath, fileName);

        return this.pdfService.toFile(template, outputPath, pdfOptions);
    }

so far ive created a simple html.hbs file with only this content:

<style>
    .the-div{
        height: 100%;
        width: 100%;
        border: 1px solid red;
    }
</style>

<div class="the-div"></div>
<div class="the-div"></div>
<div class="the-div"></div>
<div class="the-div"></div>

now, when i generate the pdf i can see the red border of the div being offset more and more page by page (look at the file included)

how can i fix that? i need the div to be 100% height on each page

test.pdf