打印时删除空白页 - 使用可见性：隐藏

我有一个页面显示许多帖子，并允许打印一个帖子（一个div及其所有孩子）。打印时删除空白页 - 使用可见性：隐藏

随着点击打印按钮，我经过的每一个元素的网页和风格上，如下所示：

打印设置为类printme其风格top和left性能到div 0并将position设置为absolute。
股利打印的孩子单独
左如果该元素是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 ATE 2：

使用此代码：而不是你的代码

@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

您尝试过使用！重要页面打破后：避免！重要; ＆page-break-before：avoid！important;像这样 – 2016-12-17 07:31:12

是的，仍然有2页。 – mseifert

打印时删除空白页 - 使用可见性：隐藏

回答

相关问题