0

I have an example below that is designed to be printed off. I have a series of div elements which compose the body that I am expecting to render either completely one on page or move to the next page, so that no data is cut off. I have a static header and footer that must be on every page of the printoff. I have tried all sorts of different configurations to keep this logic intact while also including a header and footer that statically populate.

Note: It is an absolute requirement that the elements between the header and footer (the main body) are able to wrap onto the next page. There will be cases where there is too much data. I'm looking for a solution that will allow for a static header and footer, while the body wraps around / ignores them across multiple pages.

One method I'm currently exploring has been setting a fixed @page margin size. This results in the inside boxes behaving appropriately. My only issue is that I cannot get the header or footer to render outside of the given margin sizes, even when I set their position values to be negative. Here is my example code:

<html>
    <head>
        <style>
            * {
                margin: 12px;
                padding: 12px;
                width: 256px;
            }

            header {
                border-style: solid;
                position: absolute;
                top: 0px;
                height: 128px;
                border-color: blue;
            }

            div {
                border-style: solid;
                height: 128px;
                break-inside: avoid;
            }

            footer {
                border-style: solid;
                position: absolute;
                bottom: 0px;
                height: 128px;
                border-color: red;
            }

            @page { 
                size: auto;
                margin: 60mm 0 60mm 0;
                bleed: 10cm;    
            }
        </style>
    </head>
    <body>
        <header> </header>

        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>
        <div> </div>

        <footer> </footer>
    </body>
</html>

Screenshot

This is how it's rendering, but I want the header and footer to be rendered at the top / bottom of the pages, while the inside elements keep their current logic.

I've tried wrapping the inside elements in a div and then applying margin attributes, but this causes them to lose the functionality of wrapping correctly across multiple pages, and instead bleeding / being written on top of the footer.

What can I do?

Ethan Hill
  • 478
  • 2
  • 10
  • 24
  • This might help you: https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document – Azu Dec 06 '21 at 15:59
  • @Azu thank you! I took a look, and unfortuantely it did not help me. In their example, the body bled out onto the next page and wrote over the footer, like what this example is doing. I'm trying to find a solution will will prevent the text from writing over the footer. – Ethan Hill Dec 06 '21 at 16:27

0 Answers0