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

【问题标题】：Removing blank pages when printing - using visibility: hidden打印时删除空白页 - 使用可见性：隐藏
【发布时间】：2017-05-02 22:56:12
【问题描述】：

我有一个页面显示许多帖子并允许打印单个帖子（div 及其所有子项）。

点击打印按钮后，我浏览了页面上的每个元素并设置了如下样式：

要打印的 div 设置为 printme 类，该类将 top 和 left 属性设置为 0，并将 position 设置为 absolute。
要打印的 div 的子项被单独留下
如果元素是要打印的 div 的父元素，我添加设置 visibility: hidden 的类 print-visibility-hide。
否则，我添加一个设置display: none 的类。其输出如下所示。

除了打印空白页外，一切正常 - 我推测这是由于父 div 使用 visibility: hidden 隐藏内容，因此仍占用空间。

有什么方法可以打印我的 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;
  }
}

【问题讨论】：

标签： javascript html css printing

【解决方案1】：

像这样使用@media 打印：

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

更新 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;
  }

}

【讨论】：

我用你的替换了我的 html，body {}，但仍然得到 2 页。
您是否尝试过使用 !important After page-break-after: 避免 !important; & page-break-before: 避免 !important;像这样
是的，还有 2 页。
我不尝试.. 但删除 .printme, .printme:last-child { page-break-after: Avoid; }
我有一个冲突的 html 高度：100% 定义覆盖了在@media{} 中设置的内容最后，height: auto 或您的height: 99% 都工作了一次将!important 放在高度之后定义。感谢您的帮助。