打印 HTML: 无法在第 2 页放置 DIV

Question

我正在构建一个专门用于打印的 HTML 页面。我想将文本框 (DIV) 准确地放置在打印报告中客户想要的位置。

挑战：

我的 HTML 需要打印 2 页。
每页需要包含一个距左侧一英寸、距顶部一英寸的框。盒子应该是 1 英寸宽和 1 英寸高。

听起来很简单，对吧？

我想出了以下 HTML 代码，但它包含一个问题。在第 2 页上，打印的框只比第 1 页高一点点。您可以在打印预览中发现问题。这个问题出现在我尝试过的每个浏览器中......所以我什至不能责怪浏览器！

有什么想法吗？

这是我的尝试：

<!DOCTYPE html>
<html>
<head>
    <style>

        @page {
            margin: 0mm;
        }

        .box {
            position: absolute;
            left: 1in;
            top: 1in;
            width: 1in;
            height: 1in;
            background-color: gray;
            overflow:hidden;
        }

        .page {
            page-break-after: always;
            position: relative;
            height: 297mm;
            width:210mm;
        }
    </style>
</head>
<body>


<div class="page" id=page1">
    <div class="box">this box is placed properly.</div>
</div>

<div class="page" id=page2">
    <div class="box">this box is just a bit too high!</div>
</div>

</body>

Answer 1

body 上有默认边距，在我的浏览器中它是 8px，因此您应该将其更改为：

body {
    margin: 0px;
}

现在顶部位置相同，但我的浏览器在末尾显示了一个额外的页面，您可以采取一些技巧来摆脱它：

.page {
    border: 1px solid transparent;
}

另请参阅：HTML default body margin, how to avoid extra blank page at end while printing?

打印 HTML: 无法在第 2 页放置 DIV

Printing HTML: Can't place DIVs on page 2

html

printing-web-page