HTML转PDF生成含空白页的两页，原因何在？

我尝试让HTML生成恰好一页的PDF，原本认为以下代码可以实现该需求：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
@page {
    size: A4 landscape;
    margin: 0mm; /* Adjust margins as needed */
}

body, html {
    margin:  0mm;
    padding: 0mm;
}

.container {
    display: grid;
    
    grid-template-columns: repeat(4, 1fr); /* 4 columns with equal width */

    grid-gap: 10px; /* Adjust the gap between grid items */

    margin: 0 auto; /* Center the grid container and add some margin */
    padding: 0px; /* Add padding inside the grid container */

    width: calc(841pt - 2px);
    height: calc(594pt - 2px);
}

.item {
    background-color: lightgrey;

    font-size: 18px; /* Example font size */
    text-align: center; /* Center align text */

    margin:  0px;
    padding: 0px;

    height: 100%;
}
/*
this is the bit that handles the margin inside the
grid container
*/
.item div {
    padding: 2em;
    text-align: left;
    overflow-y: hidden;

    height: 100%;

}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">
      <div>
Aspernatur ut consequuntur voluptatem ipsam consectetur. Minima aut
dolorem delectus voluptatem corporis numquam. In occaecati quis
consectetur. Eum eligendi ab nulla beatae inventore et. Eveniet
perferendis mollitia consequatur.
      </div>
    </div>
    <div class="item">
      <div>
Magnam cumque dolores qui tenetur consequuntur perferendis. Eum
temporibus quis eum voluptate quia id eaque totam. Veritatis eveniet et
occaecati fuga aut ut eveniet.
      </div>
</div>
    <div class="item">
      <div>
Facere cumque eum consequatur earum incidunt quia accusantium suscipit.
Eum placeat mollitia quasi quidem distinctio aut. Sunt porro aliquam
possimus necessitatibus odio culpa eum rerum.
      </div>
    </div>
    <div class="item">
      <div>
Amet eaque expedita repellendus quo enim nemo dolores consectetur.
Recusandae eos necessitatibus qui qui ipsam voluptatem ipsa quam. Qui
non ducimus laboriosam suscipit.
cumque sapiente et.
      </div>
    </div>
    <div class="item">
      <div>
Maiores eligendi deserunt qui autem consequuntur ducimus. Quia dolores
dolores porro sed et et laboriosam autem. Vitae rem cupiditate in et
minima sit perferendis.
      </div>
    </div>
    <div class="item">
      <div>
    Magnam cumque dolores qui tenetur consequuntur perferendis. Eum
temporibus quis eum voluptate quia id eaque totam. Veritatis eveniet et
occaecati fuga aut ut eveniet.
    </div>
</div>
    <div class="item">
      <div>
Facere cumque eum consequatur earum incidunt quia accusantium suscipit.
Eum placeat mollitia quasi quidem distinctio aut. Sunt porro aliquam
possimus necessitatibus odio culpa eum rerum.
      </div>
    </div>
    <div class="item">
      <div>
Amet eaque expedita repellendus quo enim nemo dolores consectetur.
Recusandae eos necessitatibus qui qui ipsam voluptatem ipsa quam. Qui
non ducimus laboriosam suscipit.
cumque sapiente et.
      </div>
    </div>
  </div>
</body>
</html>

但使用以下Chrome无头模式命令转换为PDF时：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless=new --print-to-pdf-no-header --no-pdf-header-footer --print-to-pdf-no-header --print-to-pdf=empty.pdf empty.html 

最终得到了两页PDF，其中一页为空白。

问题原因 #

1. 网格间隙占用额外垂直空间：.container设置的高度calc(594pt - 2px)没有考虑grid-gap:10px的垂直占用——8个网格项分2行，垂直方向会有1个间隙，总高度会超出页面高度，触发分页。
2. 内部元素padding溢出：.item div设置了height:100%和padding:2em，默认盒模型下padding会在高度外额外添加，导致内部元素高度溢出，间接推高容器总高度。

解决方案 #

1. 调整容器高度，预留间隙空间：把.container的高度改为calc(594pt - 2px - 10px)，抵消垂直方向网格间隙的占用。
2. 修改盒模型，让padding包含在高度内：给.item div添加box-sizing: border-box，确保padding不会超出设定的高度：

.item div {
    box-sizing: border-box;
    padding: 2em;
    text-align: left;
    overflow-y: hidden;
    height: 100%;
}

3. 额外优化：给body添加overflow: hidden，避免页面出现滚动触发的意外分页：

body, html {
    margin: 0mm;
    padding: 0mm;
    overflow: hidden;
}

修改后重新执行转换命令，就能得到恰好一页的PDF。

内容的提问来源于stack exchange，提问作者simone