@page打印方案：如何在页边距外渲染div实现固定页眉页脚与正常分页

核心思路 #

你之前的方案问题出在两点：

• absolute 定位是相对于父元素（这里是body），只会在第一页渲染，且受文档流限制无法突破@page设置的内容边距
• 全局通配符样式覆盖了页眉页脚的定位属性，导致定位失效

正确方案采用position: fixed 实现页眉页脚的每页重复渲染，配合@page预留上下边距承载页眉页脚，同时保留主体元素的分页规则。

修改后完整代码 #

<html>
    <head>
        <style>
            /* 全局样式仅作用于主体内容，避免影响页眉页脚 */
            .content-item {
                margin: 12px;
                padding: 12px;
                width: 256px;
                border-style: solid;
                height: 128px;
                break-inside: avoid; /* 保留不跨页裁切的规则 */
            }

            header {
                border-style: solid;
                border-color: blue;
                position: fixed; /* fixed定位打印时会在每一页重复出现 */
                top: 0;
                left: 0;
                height: 128px;
                width: 100%;
                padding: 10px;
                box-sizing: border-box;
            }

            footer {
                border-style: solid;
                border-color: red;
                position: fixed;
                bottom: 0;
                left: 0;
                height: 128px;
                width: 100%;
                padding: 10px;
                box-sizing: border-box;
            }

            @page { 
                size: auto;
                /* 上下边距设置为略大于页眉页脚的总高度，预留承载空间 */
                margin: 140px 20px 140px 20px; 
            }
            /* 可选：屏蔽屏幕显示时的页眉页脚固定效果，仅打印时生效 */
            @media screen {
                header, footer {
                    position: static;
                }
            }
        </style>
    </head>
    <body>
        <header>页眉内容</header>
        <!-- 主体内容 -->
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>

        <footer>页脚内容</footer>
    </body>
</html>

效果说明 #

• 页眉页脚会固定出现在每一页的顶部/底部，不会被裁切，也不会与主体内容重叠
• 主体div保留break-inside: avoid规则，单个div不会被拆分到两页显示
• 内容超过单页容量时自动分页，完全满足跨页换行的要求
• 兼容Chrome、Edge、Firefox等主流浏览器，无需引入第三方工具

内容的提问来源于stack exchange，提问作者Ethan Hill