HTML页面打印/保存为PDF时内容错位问题求助

你的问题核心在于当前打印样式没有覆盖print-section的内联定位和padding样式，再加上浏览器默认的打印边距，导致绿色边框无法贴合PDF页面。以下是具体的修复方案：

问题分析 #

1. #print-section本身带有内联样式top:74px;left:16px;right:16px;bottom:74px;padding:16%，这些样式在打印时依然生效，导致内容偏移和留白
2. 浏览器默认会给打印页面添加边距，进一步放大了留白问题
3. 现有打印样式仅设置了left:0;top:0，但优先级低于内联样式，无法生效

修复代码 #

修改你的@media print样式，强制覆盖内联样式并重置打印边距：

<style>
/* Choisi ce qui doit être imprimer et comment */
@media print {
    /* 重置浏览器默认打印边距 */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* 隐藏所有非打印元素 */
    body * {
        visibility: hidden;
    }
    /* 强制显示打印区块及其内部所有元素 */
    #print-section, #print-section * {
        visibility: visible !important;
    }
    /* 让打印区块完全填满打印页面，覆盖内联样式 */
    #print-section {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding: 0 !important; /* 如需保留内边距可改为具体数值，比如10px */
        overflow: visible !important; /* 打印时不需要滚动条 */
    }
}
/* 原页面样式保留 */
</style>

<div class="scrollable-box" id="print-section" style="position:absolute;top:74px;left:16px;right:16px;bottom:74px;border:1px solid #00FF00;color:white;padding:16%;font-family:'LMRoman10';overflow:auto;">
contents...
...
</div>

关键修改说明 #

• body { margin:0; padding:0 }：去掉浏览器默认的打印边距，确保页面从边缘开始渲染
• 使用!important覆盖print-section的内联样式：内联样式优先级最高，必须强制覆盖才能消除原来的定位偏移和padding
• overflow: visible：打印场景下不需要滚动条，避免内容被截断
• 如果需要保留少量内边距，可将padding:0改为padding:10px这类具体数值，根据需求调整

内容的提问来源于stack exchange，提问作者Pierrot Ballay-Legrand