html – break-in: avoid Neatly wrapped around the position: absolute; Header and footer

I am using Chromium based browser. My goal is to create a printable report consisting of variable sized divs that fit within a specific header and footer that is required on each page. This is the code I wrote as an example.

<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;
        }
    </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>

This sounds fine when I’m presenting it in the browser. However, when I go to print my results, it looks like this:

Example offered

How can I format my code so that the black boxes (div) do not overlap with the header and footer elements, but render neatly under the header on the next page? Is this possible using CSS and HTML only?

Write a Comment