5

I've been working on a print page for a client. After playing around for awhile I've found I get an extra blank page. The unusual thing is that if I select "Outline Block Level Elements" in Web Developer for chrome, the extra page disappears. This is all the CSS being used on that page right now:

@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;
 }

I've done a lot of googling but I can't see anything related to this. The body border clearly shows the div ending before the end of the first page, however I still get an extra blank page for some reason.

4

8 回答 8

5

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

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

于 2012-11-22T12:13:40.803 回答
4

答案真的很晚，但我认为我的贡献可以帮助遇到同样问题的人，我使用 CSS 设置打印页面：

创建动态 html 内容并将其附加到 body 元素以仅打印此类内容，我意识到只有 Chrome（46 版）和 Opera（32 版）在打印时会在开始时创建一个额外的空白页，这仅发生在内容高度大于页面高度。@mewiki 提供的解决方案解决了我 2 天的研究和测试问题。

事实上，Chrome 和 Opera 似乎有默认边距并设置以下规则：

body {
    margin: 0 0 0 0;
}

解决了其他浏览器没有遇到的令人沮丧的行为。

于 2015-11-04T16:56:52.917 回答
3

老问题，但对于有同样问题的人来说，这是我为我解决的解决方案。

我发现正文的边距底部必须明确设置为零（Chrome 和 Safari 似乎有默认边距）。

body
{
    margin: 0px 0px 0px 0px; 
}

div.page {
  margin: 10px 10px 10px 10px; 
  page-break-before: none;
  page-break-after: none;
  page-break-inside: avoid;
}

对于每个要打印的页面，都以 a 开头<div class="page">并在此处设置页边距，以便页面看起来不错。

于 2014-07-30T10:18:49.770 回答
2

所以因为 27.9cm 变成了1423.03px我怀疑它导致打印渲染器显示额外像素的东西。将此添加到我的页面解决了这个问题。

.page-a4 {
  width: 21cm;
  height: calc(27.9cm - 1px);
}

于 2020-06-02T03:29:00.137 回答
1

对于任何处理多个页面的人。我在部分中添加了每个页面内容，然后使用了这个：

section {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
于 2019-07-25T20:35:06.280 回答
0 

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

于 2020-07-02T17:46:42.527 回答
0

我遇到了类似的问题，即引入分页符导致空白页。

我没有足够的声誉来评论wiredolphin的帖子，但是使用该建议，以下内容对我有用

html, body {
  margin: 0 0 0 0;
  height: 99% !important;
}

.page {
  height: 100vh;
  page-break-after: always;
}

我知道这不能回答原始海报的问题，但它已经很老了，这可能会对某人有所帮助。

另外，感谢有线海豚！你把我引向了正确的方向。

于 2019-05-20T20:32:28.760 回答
0

我面临同样的问题，Neograph734 的回答给了我一个重要的提示。

我还得到了额外的空白页，唯一对我有用的就是将此规则添加到我的 css 中（用于打印）

*
{
    box-sizing: border-box;
}

然后我不再需要担心在使用边距、填充或边框时添加额外的像素。

一旦我添加了这条规则，我只需要调整盒子的位置，一切都完美无缺。

于 2021-09-09T22:40:13.390 回答