5

私はクライアントの印刷ページに取り組んできました。しばらく遊んだ後、余分な空白のページが表示されることがわかりました。珍しいことに、ChromeのWeb Developerで[ブロックレベルの要素の概要]を選択すると、余分なページが消えます。これは、現在そのページで使用されているすべての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が終了していることを明確に示していますが、何らかの理由で余分な空白ページが表示されます。

4

8 に答える 8

5

どこかに1ピクセルしか追加されていないものがあるのでしょうか？270mmの高さ全体を使用するようにページを定義するため。マージン/パディング/ボーダーが1つでも、新しいページが追加されます。

この値を減らしても、それは起こりますか？そうでない場合は、この値を少し削除することをお勧めします（とにかくフルハイトを使用しないでください）。次のページが前のページに残っている小さなスペースを占有しないように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

古い質問ですが、同じ問題を抱えている人にとっては、それを修正した私の解決策です。

本体のmargin-bottomを明示的にゼロに設定する必要があることがわかりました（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

同様の問題が発生し、ページ分割の導入により空白のページが発生しました。

私はwiredolphinの投稿にコメントするのに十分な評判がありませんが、その提案を使用して、次のことが私のために働きました

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

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

これは元のポスターの質問に答えないことは知っていますが、かなり古いので、誰かを助けるかもしれません。

また、wiredolphinに感謝します！あなたは私を正しい方向に導いてくれました。

于 2019-05-20T20:32:28.760 に答える
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

私は同じ問題に直面していて、Neograph734の答えは私に重要なヒントを与えました。

また、余分な空白ページが表示されていました。私にとって有効だったのは、このルールをcss（印刷用）に追加することだけでした。

*
{
    box-sizing: border-box;
}

そうすれば、マージン、パディング、または境界線を使用するときに余分なピクセルが追加されることを心配する必要がなくなります。

そのルールを追加すると、ボックスの位置を調整するだけで、すべてが問題なく機能しました。

于 2021-09-09T22:40:13.390 に答える