印刷時の空白ページの削除 - 可視性の使用：非表示

私は多くの投稿を表示し、1つの投稿（すべての子を持つdiv）の印刷を許可するページを持っています。次のように印刷ボタンをクリックすると、私はそれページ上のすべての要素を通過したスタイルに行く印刷時の空白ページの削除 - 可視性の使用：非表示

：

印刷するdiv要素をスタイルtopとleftプロパティにクラスprintmeに設定されています0に設定し、positionをabsoluteに設定します。要素は、印刷するdiv要素の親である場合
の子を印刷するDIVが単独で
を残している、私はvisibility: hiddenを設定し、クラスを追加します。
それ以外の場合は、display: noneを設定するクラスを追加します。これの出力を下に示します。

すべてが空白のページが印刷することを除いて正常に動作します - 私は想定していたコンテンツを非表示にするvisibility: hiddenを使用して、親のdivが原因であるため、まだスペースを取ります。

divを印刷して、余分なスペースを削除または折りたたむ方法はありますか？

HTML - 私は（簡潔にするために取り外したすべてのコンテンツを含む）、次のようなもので終わる：

<body class="print-visibility-hide"> 
    <div class="page-container print-visibility-hide"> 
    <div class="main print-visibility-hide"> 
     <div class="main-content d-section-top print-visibility-hide" id="main-content" style="background: transparent none repeat scroll 0% 0%; margin-left: 145px;"> 
     <div id="gemwrapper" class="gemwrapper print-visibility-hide" style="display: block;"> 
      <div class="gem-content-wrapper d-item d-section print-visibility-hide"> 
      <div class="gem-content-main gems print-visibility-hide"> 
       <div class="print-visibility-hide"> 
       <div style="display: block;" id="s-g1353" class="print-visibility-hide"> 
        <table class="print-visibility-hide"> 
        <tbody class="print-visibility-hide"> 
         <tr class="item tools print-visibility-hide"> 
         <td class="textarea print-visibility-hide"> 
          <div id="gparent1353" class="textarea print-visibility-hide"> 
          <div id="gx1353" class="printme"> 
           <pre> 
This is the text I am printing which can be any length.</pre>

CSS

@media print { 
    body * { 
    visibility: hidden; 
    } 
    html, 
    body { 
    height: auto; 
    } 
    .print-display-none, 
    .print-display-none * { 
    display: none !important; 
    } 
    .print-visibility-hide, 
    .print-visibility-hide * { 
    visibility: hidden !important; 
    } 
    .printme, 
    .printme * { 
    visibility: visible !important; 
    } 
    .printme { 
    position: absolute; 
    left: 0; 
    top: 0; 
    } 
    .printme, 
    .printme:last-child { 
    page-break-after: avoid; 
    } 
}

出典

2016-12-17 mseifert

使用して、このような印刷@media：

を

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

UPD 2 ATE：

使用このコード：代わりにあなたのコード

@media print { 
    html, body { 
    border: 1px solid white; 
    height: 99%; 
    page-break-after: avoid !important; 
    page-break-before: avoid !important; 
    } 
    .print-display-none, 
    .print-display-none * { 
    display: none !important; 
    } 
    .print-visibility-hide, 
    .print-visibility-hide * { 
    visibility: hidden !important; 
    } 
    .printme, 
    .printme * { 
    visibility: visible !important; 
    } 
    .printme { 
    position: absolute; 
    left: 0; 
    top: 0; 
    } 

}

出典

2016-12-17 07:24:11

のを私は、私のhtmlを交換し、本体{}あなたと、まだ2ページを取得しています。 – mseifert

あなたは使用しようとしましたか？important重要：＆page-break-before：避ける！重要;このように –

はい、まだ2ページを取得しています。 – mseifert

印刷時の空白ページの削除 - 可視性の使用：非表示

答えて

関連する問題