HTML+CSS A4 页面自动分页

Question

我想将 HTML+CSS 文档打印到 A4 纸上。

我的简化代码在这里：

<html>
<head>
<style id="style_A4" media="print">
    @page {
        size:    A4 portrait;
    }
    body {
        width:   210mm;
        height:  297mm;
        padding: 20mm;
    }
</style>
</head>
<body>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 0</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 1</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 2</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 3</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 4</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 5</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 6</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 7</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 8</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 9</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 10</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 11</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 12</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 13</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 14</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 15</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 16</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 17</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 18</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 19</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 20</p>
</body>
</html>

问题如下：所有页面都缺少底部填充，第二页缺少顶部填充，如您在此图片中所见：

我发现许多使用 page-break-after: always 或 page-break-before: always 应用手动分页符的解决方案。但是，我希望分页是自动的，并且在所有页面上都强制执行所有填充，就像在 Microsoft Word 中一样。能在Chrome95.0.

上运行就够了

Answer 1

以下规则可以帮助您为表格添加分页符。

table { 
    page-break-inside:auto 
}
tr    { 
    page-break-inside:avoid; page-break-after:auto 
}

或尝试将 div 添加为：

<div class="page-break"></div>

样式：

@media all {
    .page-break { display: none; }
}

@media print {
    .page-break { display: block; page-break-before: always; }
}

Answer 2

如果我对你的问题的理解正确，你可能想使用页边距而不是 body 上的填充。确保在打印对话框中将页边距设置为默认值。如果不这样做，您的自定义页边距（在 CSS 中指定）将被覆盖并且不会产生任何效果。

您的样式表将如下所示：

@page {
  size:    A4 portrait;
  margin: 20mm;
}

body {
  width:   210mm;
  height:  297mm;
}

HTML+CSS A4 页面自动分页

HTML+CSS A4 page with automatic page breaks

html

css

css-paged-media