具有精确 A4 横向尺寸的空正文元素打印在 2 页上答案

【问题标题】：Empty body element with exact A4 landscape dimension is printed on 2 pages具有精确 A4 横向尺寸的空正文元素打印在 2 页上
【发布时间】：2018-01-18 12:00:12
【问题描述】：

演示：

print()

@page {
    size: A4 landscape;
    margin: 0;
}
html, body {
    margin: 0;                
}
html {
    background: cyan;
}
body {
    width: 297mm;
    height: 210mm;                
    background: red;
}

A4 landscape 的尺寸正确，但打印溢出到第二页。这些发生在 Win 10 Chrome 63、FF 52 和 Edge 41 中。

当我使用纵向尺寸并打印 A4 纵向时，按预期只打印一页，没有任何溢出。

有人对这个问题有任何线索吗？每个平台都会出现这种情况吗？

提前谢谢你

【问题讨论】：

你用的是windows电脑吗？检查默认设置的填充（由窗口）。因为在我的 linux 机器上它只有 1 页。
@zeropublix，是的，它的 win10 机器。感谢您对 linux 的反馈。

标签： html css printing

【解决方案1】：

使用body {margin-top: -1px }

print()

@page {
    size: A4 landscape;
    margin: 0;
}
html, body {
    margin: 0;      
}
html {
    background: cyan;
}
body {
    width: 297mm;
    height: 210mm;     
    background: red;
    margin-top: -1px;
}

【讨论】：

谢谢你，法哈德。但这并不能解决我的溢出问题。我仍然看到2页。我还在几台 pc (win10) 机器上进行了测试，并且到处都打印了 2 页。
您好 Farhad，谢谢，它确实修复了 2 页打印，但不能防止溢出。使用解决方法，我们只需从顶部剪切页面。 body{ position: fixed; top: 0; left: 0;} 也类似，但从底部开始。使用body { display: border-box; border: 1px solid green }，顶部边框不再可见。无论如何，这是迄今为止最好的，但也是解决这个问题的方法。我将进一步寻找溢出的解决方案和解释。如果我什么都没找到，我会接受这个解决方案，再次感谢您。
如果你介意的话，我已经编辑了帖子，删除了分页规则，因为它对行为没有影响。只有margin-top很重要。也仅适用于body 而不是html, body，以防止双边距，因为它适用于html和body。

【解决方案2】：

参考这个解决方案： html:

<div class="book">
    <div class="page">
        <div class="subpage">Page 1</div>    
    </div>
</div>

css:

 body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font: 12pt "Tahoma";
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.page {
    /*width: 210mm;
    min-height: 297mm;*/
    width:297mm;
    min-height:210mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px red solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {
        width: 210mm;
        height: 297mm;        
    }
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

js:

window.print();

【讨论】：

感谢 Kumar，我已经在 stackoverflow 上看到过这样的示例，但正如我所提到的，纵向 A4 尺寸按预期打印在 1 页上，溢出仅发生在 A4 横向尺寸上。当我将您的示例更改为横向时，我又看到了 2 页。

【解决方案3】：

试试

body {
    margin-top: -1px;
}

这可能行不通，但这是我最好的猜测。

【讨论】：