CSS 打印布局正在添加一个额外的页面

Question

我一直在为客户制作打印页面。玩了一段时间后，我发现我得到了一个额外的空白页。不寻常的是，如果我在 Web Developer for chrome 中选择“大纲块级元素”，额外的页面就会消失。这是该页面上现在使用的所有 CSS：

@page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        height: 296mm;
        border: 1px solid black;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }

.print_A4 {
margin: 0mm;
padding: 0mm;
height: 270mm; /*A4 Size*/
width: 210mm; /*A4 Size*/
}

.A4_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 44mm;
    height: 210mm;
    width: 165mm;
 }

我已经做了很多谷歌搜索，但我看不到任何与此相关的内容。正文边框清楚地显示了第一页结束之前的 div 结尾，但是由于某种原因我仍然得到一个额外的空白页。

Answer 1

是否有什么东西只在某处添加了 1 个像素？由于您将页面定义为使用完整的 270 毫米高度。即使一个边距/填充/边框也会添加一个新页面。

如果减小这个值还会发生这种情况吗？如果没有，那么我建议您稍微减少该值（无论如何您都不使用全高。）您可以添加page-break: after以.print_A4防止下一页占用上一页上留下的小空间。