Auto Header and footer when data is exceeding the page Laravel "wemersonjanuario/wkhtmltopdf-windows": "0.12.2.3"

I want to have auto header and footer when data exceed the page.

Version of pdf generator wemersonjanuario/wkhtmltopdf-windows : 0.12.2.3

Here is the sample output of the pdf https://drive.google.com/file/d/15eI_rXdeBDjXgKHCh8u5VqO6mrF7fWYy/view?usp=sharing

Here is the sample code

<!DOCTYPE html>

<div class="document">

    <div class="header">

        <div class="img">
            <img src="{{ url('assets/tenant/nodifi/img/logo.png') }}" width="140">
        </div>
        <div class="title">
            <div>FINANCE APPLICATION</div>
        </div>
        <div class="sub-title">{{$pdfData['Finance Application']}}</div>

    </div>

    <div class="content">
        
        @if(isset($pdfData['Assets']['Person']))
            <div class="sub-content" style="page-break-inside: auto;">
                <div class="title">
                    <div>Assets</div>
                </div>
                <div class="data">
                    <table class="general-pages">

                        <tr>
                            <td style="width: 5%">ID</td>
                            <td style="width: 10%">Link</td>
                            <td style="width: 35%">Asset Type and Description</td>
                            <td style="width: 40%">Owners</td>
                            <td style="width: 10%; text-align:right">Value</td>
                        </tr>
                                    
                        @foreach($pdfData['Assets']['Person'] as $key => $asset)
                            <tr>
                                <td class="td-text">{{$asset['Id']}}</td>
                                <td class="td-text">{{$asset['Link']}}</td>
                                <td class="td-text">
                                    <div>{{$asset['Type']}}</div>
                                    <div>{{$asset['Address']}}</div>
                                </td class="td-text">
                                <td class="td-text">{{$asset['Owners']}}</td>
                                <td class="td-text" style="text-align:right">{{$asset['Amount'] ? $asset['Amount'] : '-'}}</td>
                            </tr>
                        @endforeach
                        
                    </table>
                </div>
                <div class="data-footer">
                    <table style="width: 100%;">
                        <tr>
                            <td style="width: 70%;"></td>
                            <td style="width: 30%;">
                                <div class="right">
                                    <div>
                                        Combined Asset Value
                                    </div>
                                    <div class="right">
                                        {{$pdfData['Assets']['Combined Asset Value']['Person'] ? $pdfData['Assets']['Combined Asset Value']['Person'] : '-'}}
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        @endif

        @if(isset($pdfData['Liabilities']['Person']))

            <div class="sub-content" style="margin-top: 30px;">
                <div class="title">
                    <div>Liabilities</div>
                </div>
                <div class="data">
                    <table class="general-pages" style="page-break-inside: void;">

                        <tr>
                            <td style="width: 5%">ID</td>
                            <td style="width: 10%">Link</td>
                            <td style="width: 35%">Asset Type and Description</td>
                            <td style="width: 20%">Owners</td>
                            <td style="width: 10%">
                                <div style="text-align:center">
                                    Borrowed / Limit
                                </div>
                            </td>
                            <td style="width: 10%" style="text-align:center">
                                <div style="text-align:center">
                                    Amount Owing
                                </div>
                            </td>
                            <td style="width: 10%" style="text-align:right">
                                <div style="text-align:right">
                                    Monthly Payment
                                </div>
                            </td>
                        </tr>

                        @foreach($pdfData['Liabilities']['Person'] as $key => $liability)
                            <tr>
                                <td class="td-text">{{$liability['Id']}}</td>
                                <td class="td-text">{{$liability['Link']}}</td>
                                <td class="td-text">
                                    <div>{{$liability['Type']}}</div>
                                </td class="td-text">
                                <td class="td-text">{{$liability['Owners']}}</td>
                                <td class="td-text" style="text-align:center">{{$liability['Credit Limit'] ? $liability['Credit Limit'] : '-'}}</td>
                                <td class="td-text" style="text-align:center">{{$liability['Amount'] ? $liability['Amount'] : '-'}}</td>
                                <td class="td-text" style="text-align:right">{{$liability['Monthly Payment'] ? $liability['Monthly Payment'] : '-'}}</td>
                            </tr>
                        @endforeach
                        
                    </table>
                </div>
                <div class="data-footer">
                    <table style="width: 100%;">
                        <tr>
                            <td style="width: 30%;">
                                <div>
                                    Combined Borrowed / Limits
                                </div>
                                <div>
                                    {{$pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Credit Limits'] ? $pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Credit Limits'] : '-'}}
                                </div>
                            </td>
                            <td style="width: 32%; text-align: center;">
                                <div>
                                    Combined Amount Owing
                                </div>
                                <div>
                                    {{$pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Amount Owing'] ? $pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Amount Owing'] : '-'}}
                                </div>
                            </td>
                            <td style="width: 33%;">
                                <div class="right">
                                    <div>
                                        Combined Monthly Payment
                                    </div>
                                    <div class="right">
                                        {{$pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Monthly Payment'] ? $pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Monthly Payment'] : '-' }}
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
        @endif

        @if(isset($pdfData['General Household Expenses']))
            <div class="sub-content" style="margin-top: 30px;">
                <div class="title">
                    <table style="width: 100%;">
                        <tr>
                            <td style="width: 100%;">General Household Expenses</td>
                        </tr>
                    </table>
                </div>
                <div class="data">
                    <table class="general-pages">

                        <tr>
                            <td style="width: 30%">Expense Type</td>
                            <td style="width: 50%">Owners</td>
                            <td style="width: 20%; text-align:right;">Monthly Payment</td>
                        </tr>

                        @foreach($pdfData['General Household Expenses']['Data'] as $key => $asset)
                            <tr>
                                <td class="td-text">{{$asset['Type']}}</td>
                                <td class="td-text">{{$asset['Owners']}}</td>
                                <td class="td-text" style="text-align:right;">{{$asset['Amount'] ? $asset['Amount'] : '$0'}}</td>
                            </tr>
                        @endforeach
                        
                    </table>
                </div>
                <div class="data-footer">
                    <table style="width: 100%;">
                        <tr>
                            <td style="width: 20%;"></td>
                            <td style="width: 80%;">
                                <div class="right">
                                    <div>
                                        Combined General Monthly Expenses
                                    </div>
                                    <div class="right">
                                        {{$pdfData['General Household Expenses']['Combined General Monthly Expenses']}}
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        @endif

    </div>

    <div class="footer">
    </div>

</div>   

Here is the SCSS

.document {
  height: 1123.5px;
  position: relative;
  background-color: white;

  .header {
    margin-left: 30px;      
    margin-right: 30px;      
    padding-top: 30px;  

    .title {
        float: right;
        margin-top: -45px;
        font-family: 'Times New Roman', Times, serif;
        font-size: 19px;
        color: #211447;
        font-weight: bold;
    }

    .sub-title {
        margin-top: -15px;
        float: right;
        font-size: 11px;
        color: #211447;
    }
  }
  .content {
    width: 100%;
    padding: 30px;
    
    .sub-content {

        .title {
            background-color: #e4e5e6;
            padding-left: 10px;
            padding-top: 7px;
            padding-bottom: 7px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: 500;
            color: #211447;
            width: 100%;

            .liabilities-total {

                & > table > tbody > tr > td {
                    font-size: 11px;
                    font-weight: bold;
                }
                
            }

            .expenses-total {
                float: right;
                margin-top: -22px;
                padding-top: 5px;
                padding-right: 20px;
                font-size: 12px;
                font-weight: bold;
            }

            .right {
                float: right;
                margin-top: -19px;
                padding-right: 10px;
            }
        }

        .data-footer {
            margin-top: -10px;
            background-color: #e4e5e6;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            padding: 5px;
            font-weight: 500;
            color: #211447;

            .right {
                float: right;
                padding-right: 5px;
            }
        }

        .data {
            font-size: 10px;
            width: 100%;

            .structure {
                width: 100%;


                .right {
                    float: right;
                    margin-top: -19px;
                    padding-right: 5px;
                }

                ul.tree, ul.tree ul {
                    width: 100%;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    padding-right: 5px;
                } 

                ul.tree ul {
                    margin-left: 10px;
                }

                ul.tree li {
                    padding: 0px 6px;
                    line-height: 18px;
                    border-left: 2px solid #e4e5e6;
                }

                ul.tree li:last-child {
                    border-left:none;
                    margin-left: 5px;
                }

                ul.tree li:before {
                    position:relative;
                    top:-0.3em;
                    height:3em;
                    width:12px;
                    color:white;
                    border-bottom: 2px solid #e4e5e6;
                    content:"";
                    display:inline-block;
                    left:-7px;
                }

                ul.tree li:last-child:before {
                    height: 2.8em;
                    margin-top: 1px;
                    margin-left: -4px;
                    width: 15px;
                    border-left: 2px solid #e4e5e6;   
                }
                
                .box {
                    margin-top: -27px;
                    margin-left: 5px;
                    font-size: 12px;
                    font-family: Arial, Helvetica, sans-serif;
                    padding: 7px;
                    background-color: #f7f9fa;
                }

                .box-title {
                    margin-top: 20px;
                    font-size: 12px;
                    font-family: Arial, Helvetica, sans-serif;
                    padding: 7px;
                    background-color: #f7f9fa;
                }
            }

            .sub-data {
                font-size: 12px;
                padding: 5px;
                background-color: #f7f9fa;

                .right {
                    float: right;
                    padding-right: 10px;
                }

                .title-sub {
                    padding-left: 10px;
                }

            }

            & > table {
                width: 100%;
                margin-bottom: 10px;
            }

            & > table > tbody > tr {
                border: 2px solid #f7f9fa;
            }

            & > table > tbody > tr > td {
                padding: 10px;
            }

            .general-pages {
                & > tbody > tr:nth-child(odd) {
                    background:#f7f9fa;
                }

                & > tbody > tr:first-child {
                    font-size: 12px;
                    font-family: Arial, Helvetica, sans-serif;
                }
                .td-text {
                    font-size: 12px;
                    font-family: Arial, Helvetica, sans-serif;
                    font-weight: 100;
                    color: rgb(51, 51, 51);
                }

            }

            .loan-pages {
                font-size: 12px;
                font-weight: 100;
                color: rgb(51, 51, 51);
                font-family: Arial, Helvetica, sans-serif;

                & > tbody > tr:nth-child(even) {
                    background:#f7f9fa;
                }
            }

            .right {
                float: right;
                padding-top: -5px;
            }

            .data-table {
                width: 100%;

                & > table > tbody > tr > td {
                    padding: 0px;
                    padding-left: 5px;
                    border-bottom: 2px solid #f7f9fa;
                    border-right: 2px solid #f7f9fa;
                    border-left: 2px solid #f7f9fa;

                    & > table > tbody > tr > td:first-child {
                        border-right: 2px solid #f7f9fa;
                    }
                }

                .data-table-title {
                    padding-left: 10px;
                    background-color: #f6f9fa;
                    padding-top: 7px;
                    padding-bottom: 7px;
                    font-style: italic;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 12px;
                }

                .data-table-label {
                    padding-left: 5px;
                    padding-right: 5px;
                    margin-top: 5px;
                    font-style: italic;
                    font-size: 8px;
                    margin-bottom: -5px;
                }

                .data-table-field {
                    margin: 5px;
                    font-family: Arial, Helvetica, sans-serif;
                    font-weight: 100;
                    color: rgb(51, 51, 51);
                    font-size: 12px;
                    font-weight: 100;
                    color: rgb(51, 51, 51);
                }
            }

            .key-people {
                width: 100%;
                & > table > tbody > tr > td {
                    width: 100%;
                    padding: 10px;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    border-bottom: 2px solid #f7f9fa;
                    border-left: 2px solid #f7f9fa;
                    border-right: 2px solid #f7f9fa;
                }
            }

            .purchase {

                .purchase-title {
                    background-color: #f7f9fa;
                    padding: 5px;

                    .purchase-left-title {
                        padding: 5px;
                        font-size: 12px;
                        font-family: Arial, Helvetica, sans-serif;

                        .sub-title {
                            font-weight: 100;
                            color: rgb(51, 51, 51);
                        }
                    }

                    .purchase-right-title {
                        float: right;
                        margin-top: -43px;
                        padding-right: 5px;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 12px;

                        .sub-title {
                            font-weight: 100;
                            color: rgb(51, 51, 51);
                        }
                    }

                }
            }
        }
    }
  }
}

Please help Thank you.