页面/div 的高度应该是多少，以便它只能适合打印的单个页面？答案

【问题标题】：What should be the height of a page/div so that it can fit to only a single page for the print?页面/div 的高度应该是多少，以便它只能适合打印的单个页面？
【发布时间】：2015-12-14 13:34:04
【问题描述】：

我有一个只有页眉的页面：

<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 大小的页面上。我该怎么做？

【问题讨论】：

这可能会帮助你stackoverflow.com/questions/8345857/…
浏览器倾向于在 html 和/或 body 标签上添加边距。如果您在 CSS 中也将这些元素的边距强制为 0px，您可能会得到您想要的结果。

标签： html css

【解决方案1】：

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

通过将边距和内边距归零并将高度设置为 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;
}

【讨论】：

谢谢，答案很好。但是当我向页面添加多个段落和更多标题时，就会出现问题。我想把我的内容放在一个页面上。如果我知道仅在单个页面上打印的 div 的固定高度，我可以管理该 div 内内容的边距、填充和行高。如果我向页面 div 添加更多 20 个标题，则只有适合单个页面的标题应该可见。由于溢出，应避免其他人：隐藏到页面类。这个高度应该在 950px 到 1050px 左右，因浏览器而异。我想知道 A4 纸的高度。
@SohilShah 如果将容器元素高度设置为 100%，则无需在 CSS 中为特定页面大小指定高度。我已经用一个例子更新了我的答案。

重置margin、padding、height of html、body 元素

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