Looking for a way for border to fill the height of the last printed page

user_9864781 0
Viewed 18

I am making a page for a client that generates a report that gets printed. There are a few caveats that mean I've ended up doing things in a not so ideal way.

The only problem I am left with is that on the very last page, the content does not fill the entire page and looks ugly.

Report Example

The current Structure of the HTML is as follows;

<div class="fixed bottom-0 text-center flex flex-col justify-between">
    footer content
</div>
first page (cover page w/ no border)

Then every page has the following structure...

<table class="page-break h-screen">
            @include('pdf.table-header')
            @include('pdf.table-footer')
            <tbody class="h-screen">
                <tr class="h-screen">
                    <td class="px-8 align-top h-screen text-sm">
                    </td>
                </tr>
            </tbody>
        </table>

The table footer is just empty with a fixed height to make way for the real footer with a fixed position.

All pages (tables) after page 1 are wrapped in the following div for the side borders..

<div class="border-primary border-l-8 border-r-8">

Any suggestions would be more than grateful

html-table layout printing css html
1 Answers

Okay, I've figured it out & I am posting it here if by any strange chance someone is using a similarly bad print layout.

I just had to add another div like this;

<div class="h-full border-primary border-l-8 border-r-8"></div>

After the last table and this would fill out any remaining space after the table on the last page.

user_98647810
Related