CSS打印模式：如何让元素占满后续打印页面的全部高度？

如图所示，当元素内容过多延伸至第二张打印页面时，我希望该元素也能占满第二页的全部高度，该如何实现？

我尝试了以下方法，但均无效：

• height: 100%
• 使用绝对定位
• 使用表格显示

可以通过CSS打印媒体查询结合伪元素或Grid布局来解决这个问题：

方法一：伪元素填充剩余高度 #

给目标元素设置相对定位，再通过打印媒体查询下的伪元素来填充第二页的剩余空白：

.target-element {
  position: relative;
  min-height: 100vh; /* 保证元素至少占满单页高度 */
  page-break-inside: avoid; /* 减少不必要的内部分页 */
}

@media print {
  .target-element::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 计算当前元素高度与页面高度的差值，填充剩余空间 */
    height: calc(100vh - 100%);
    background-color: inherit; /* 继承元素背景，保持视觉一致 */
  }
}

方法二：Grid布局适配打印 #

用Grid容器强制元素占满每页高度，配合分页属性实现：

@media print {
  .print-wrapper {
    display: grid;
    grid-template-rows: 100vh;
    page-break-after: always; /* 每个容器占一页 */
  }
  .target-element {
    grid-row: 1 / -1;
  }
}

注意：不同浏览器的打印渲染逻辑有差异，建议在主流浏览器中测试调整，同时要确保打印样式里的页面边距、内边距设置合理，避免干扰高度计算。

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