页面/div的高度应该是多少，这样它才能只适合打印一页

我有一个只有标题的页面：

<body>
    <div class="page">
        <h1>This is the header</h1>
    </div>
</body>

CSS是：

.page {
    height: 297mm;
    background-color: #0094ff;
    position: relative;
    overflow: hidden;
}
h1 {
    margin: 0;
    padding: 0;
}

当我尝试打印页面时，预览会生成2页。我只想把它作为一页。那么，页面类的高度应该是多少？

我只想把内容打印在一张A4大小的纸上。我该怎么做？

重置`html`、`body`元素的`margin`、`padding`、`height`

通过将边距和填充调零并将高度设置为100%，您将实现全页覆盖（不多也不少）。

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }

更新：

如果将容器元素高度设置为100%，则无需在CSS中为特定页面大小指定高度。

如果页面的内容超过了一个打印页面所能容纳的内容，并且您希望对其进行剪裁，请将height: 100%和overflow: hidden应用于容器元素——在本例中为.page。

.page {
    height: 100%;
    background-color: #0094ff;
    overflow: hidden;
}

如果要对.page元素应用填充并保持单页剪裁，则需要应用box-sizing: border-box。

.page {
    box-sizing: border-box;
    padding: 1em;
    height: 100%;
    background-color: #0094ff;
    overflow: hidden;
}