Google Chrome会打印额外的页面

Question

我目前正在使用css制作一个适合打印的网站（wordpress），在A4上打印的某些页面上，它会留下一个完全空白的最后一页（请参阅此处的示例：http://takana.co.nz/?page_id=25）

使用Google Chrome的开发人员工具和“模拟CSS媒体”选项模拟打印时，我找不到任何可以在内容末尾添加更多空格的内容。

直接的结论是，某些内容会在页脚文本之外添加空格，但我无法检查打印页面上的元素以找到它。


在chrome上使用打印预览时导致额外页面的原因是什么？

Answer 1

在css中使用以下代码

 @media print {
     html, body {
        border: 1px solid white;
        height: 99%;
        page-break-after: avoid;
        page-break-before: avoid;
     }
}

请参阅添加Css后的预览;

Answer 2

我尝试打印并且它是一页，您可以尝试添加打印中断后 - 避免在页脚上

@media print {
    footer {page-break-after: avoid;}
}

Answer 3

似乎问题与padding有关。尝试调整padding .entry-wrap进行媒体打印。

可能如下所示

@media print {
 .entry-wrap {
   padding: 25px; /* adjust it accordingly */
 }
}

希望这对你有所帮助（y）。

Answer 4

就我而言，这种相当繁琐的解决方案有效：

@media print {
     html, body {
        height: 99%;
        overflow: hidden;
     }
}

基本上，您可以简单地强制隐藏第一页之后的所有内容。显然，您想确定自己不会丢失任何有价值的东西。