window.print()固定页眉页脚重复显示时内容重叠问题求助

问题说明 #

我想通过position: fixed实现打印时页眉页脚在每一页重复显示，但目前内容会和页眉页脚重叠。尝试过用@page设置边距，但这个方法会同时影响页眉页脚的位置，问题仍未解决。

解决方案 #

核心思路是通过@page定义页面的上下边距，让固定定位的页眉页脚刚好填充到这些边距区域，同时给内容容器匹配对应的间距，确保内容处于页眉和页脚之间的安全区域。

修改后的完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 屏幕显示样式 */
        @media screen {
            .PrintOnly {display: none;}
            b, strong {
                font-weight:bold;
                display: inline-block !important;
            }
        }
        /* 打印专属样式 */
        @media print {
            /* 设置页面边距，上下边距匹配页眉页脚的总高度 */
            @page { 
                margin: 100px 94.5px; 
                size: A4; 
            }
            /* 内容容器：用默认间距适配页面预留区域 */
            .margin-print {
                margin: 0;
            }
            .PrintOnly {
                font-size: 10pt;
                overflow-x: hidden;
                overflow-y: hidden;
                font-family:'Noto Sans' !important;
            }
            b, strong {
                font-weight:bold;
                display: inline-block !important;
            }
            /* 页眉：固定到页面顶部，高度匹配@page上边距 */
            .image-header {  
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 80px;
                padding: 8px;
                background: #2658C9;
                z-index: 1;
            }
            /* 页脚：固定到页面底部，高度匹配@page下边距 */
            .image-footer {  
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 80px;
                padding: 8px;
                background: #2658C9;
                z-index: 1;
            }
        }
    </style>
</head>
<body>
    <div class="PrintOnly">
        <img class='image-header' src='../../image.png'>
        <div class='margin-print'>
            <p>Content</p>
            <!-- 可添加更多内容测试分页效果 -->
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
        </div>
        <img class='image-footer' src='../../image.png'>
    </div>
    <button onclick="window.print()">打印</button>
</body>
</html>

关键调整点 #

• @page边距设置：将页面上下边距设为页眉/页脚的总高度（高度+内边距），让内容区域自动避开页眉页脚位置。
• 固定定位的页眉页脚：设置top:0和bottom:0，使其刚好填充到@page定义的边距区域，无需负z-index，确保显示层级合理。
• 内容容器：移除多余的padding/margin，依赖@page预留的边距保证内容不被覆盖。

原方案失效原因 #

之前设置@page { margin:0 }会让内容区域占满整张纸，加上内容容器的padding/margin计算混乱，导致内容与固定定位的页眉页脚重叠。现在通过@page提前预留边距，让页眉页脚固定在边距区域，内容自然处于中间安全区。

内容的提问来源于stack exchange，提问作者Anis Septi Budiani