印刷中に最後に余分な空白ページを避ける方法は？

Question 1

CSSプロパティを使用していますが、

使用する場合page-break-after: always;=>前に余分な空白ページを印刷します

page-break-before: always;=>を使用すると、後に余分な空白ページが印刷されます。これを回避する方法は？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>

Question 2

あなたは多分追加することができます

.print:last-child {
     page-break-after: auto;
}

したがって、最後のprint要素は余分な改ページを取得しません。

ブラウザーのその惨めさをターゲットにしている場合、IE8では：last-childセレクターはサポートされていないことに注意してください。

Question 3

これを試しましたか？

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

Question 4

ここで説明されている解決策は私を助けました（webarchiveリンク）。

まず、すべての要素に境界線を追加して、新しいページが追加される原因を確認できます（余白、パディングなど）。

div { border: 1px solid black;}

そして、解決策自体は、次のスタイルを追加することでした。

html, body { height: auto; }

Question 5

これらのどれも機能しない場合は、これを試してください

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

100vhであることを確認してください

Question 6

これは私のために働きます

.print+.print {
    page-break-before: always;
}

Question 7

CSSを使用したいだけで改ページを避けたい場合は、

.print{
    page-break-after: avoid;

}

ページングされたメディアを見てください

pageBreakBeforeとpageBreakAfterに相当するスクリプトを使用して、それらの値を動的に割り当てることができます。たとえば、訪問者にカスタム改ページを強制する代わりに、これをオプションにするスクリプトを作成できます。ここでは、ヘッダーでのページのスライス（h2）とプリンター独自の裁量（デフォルト）を切り替えるチェックボックスを作成します。

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

クリックしてここにこれを使用しています例えば。スクリプト内のH2を、PやDIVなどの別のタグに置き換えることができます。

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Question 8

（今のところ）理由はわかりませんが、これは役に立ちました：

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

問題と戦っている間誰かが彼の髪を救うことを願っています...;）

Question 9

考えられる原因はたくさんあるようですが、おそらくテーマは、bodyタグの高さがw / eの理由で高すぎると見なされることです。

私の原因：min-height: 100%基本スタイルシート。

私の解決策：min-height: autoで@media printディレクティブ。

autoPhpStormによると、正しい値ではないようであることに注意してください。ただし、最小の高さに関するMozillaのドキュメントによると正しいです：

auto
フレックスアイテムのデフォルトの最小サイズ。他のレイアウトでは0よりも妥当なデフォルトを提供します。

Question 10

display:none印刷用ではない他のすべての要素に設定されます。設定visibility:hiddenはそれらを隠しておきますが、それらはすべてまだそこにあり、それらのためにスペースを取りました。空のページはそれらの隠された要素のためのものです。

Question 11

私の場合、すべてのdivに幅を設定すると次のようになりました。

.page-content div {
    width: auto !important;
    max-width: 99%;
}

Question 12

印刷領域のCSS表示と幅プロパティを変更しました

#printArea{
    display:table;
    width:100%;
}

スニペットを展開

Question 13

同様の問題が発生しましたが、原因はページの下部に40pxの余白があったためでした。そのため、最後のページにスペースがあったとしても、最後の行は常に折り返されていました。どんな種類のpage-break-*cssコマンドのためでもありません。印刷の余白を削除して修正しましたが、問題なく動作しました。他の誰かが似たようなものを持っている場合に備えて、私のソリューションを追加したかっただけです！

Question 14

さまざまな改ページの設定と高さ、およびbodyタグの数百万のさまざまなCSSルールに苦労した後、1年以上後にようやく解決しました。

印刷するページに唯一のものと思われるdivがありますが、その後にいくつかの空白ページが表示されていました。私のbodyタグはに設定されてvisibility:hidden;いますが、それだけでは不十分でした。垂直方向に高いページ要素は依然として「スペース」を占めます。そこで、これを印刷CSSルールに追加しました。

#header, #menu, #sidebar{ height:1px; display:none;}

背の高いページレイアウト要素を含むIDで特定のdivをターゲットにします。高さを小さくしてから、レイアウトから削除しました。空白のページはもうありません。数年後、私はそれをクラックしたことをクライアントに伝えてうれしいです。これが誰かを助けることを願っています。

Question 15

Chromeにはバグがあるようで、特定の状況では、display：noneでロード後に要素を非表示にすると、多くの余分なスペースが残ります。ドキュメントのレンダリングが完了する前に、ドキュメントの高さを計算していると思います。Chromeは2つのメディア変更イベントも発生し、onbeforeprintなどをサポートしていません。これらは基本的に印刷の対象です。これが私の回避策です：

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

docreadyでbodyclass = "printing"を指定すると、印刷スタイルが有効になります。このシステムでは、印刷スタイルのモジュール化とブラウザ内の印刷プレビューが可能です。

Question 16

このcssを同じページに追加して、cssファイルを拡張します。

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>

Question 17

私はすべての解決策を試しました、これは私のために働きます：

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>

Question 18

から変更するケースに遭遇しました

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

に

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

この問題を修正しました。

Question 19

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

これは私のために働いた。

Question 20

不思議なことに透明な境界線を設定すると、これが解決しました。

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

たぶん、コンテナ要素に境界線を設定するだけで十分でしょう。<-Untestet。

Question 21

いずれの回答もうまくいきませんでしたが、すべてを読んだ後、印刷したいHTMLページが1つあるのに、余分な白い空白ページが印刷されていた場合の問題がわかりました。レポートのページを印刷するためにAdminLTEブートストラップ3テーマを使用しており、その中にこのテキストをページの右下に配置したいフッタータグを使用しています。

誰かさんが印刷

以前の「著作権」フッターの代わりにjqueryを使用してそのテキストを配置しました

$("footer").html("Printed by Mr. Someone");

デフォルトでは、テーマのタグフッターは、属性を持つクラス.main-footerを使用します。

padding: 15px;
border-top: 1px solid

それは余分な空白を引き起こしたので、問題を知った後、私はさまざまなオプションを持っていました、そして最良のオプションは使用することでした

$( "footer" ).removeClass( "main-footer" );

その特定のページだけで

Question 22

必要なものをdivのページに配置し、そのdivでpage-break-inside：avoidを使用します。divは1ページに留まり、必要に応じて2ページ目または3ページ目に移動しますが、次のdivは、改ページを行う必要がある場合は、次のページから開始する必要があります。

Question 23

下部のhtmlタグの後に空白がないか確認してください。下の空白を削除してください