title: Removing blank pages when printing - using visibility: hidden
body: <p>I have a page which displays many posts and allows the printing of a single post (a <code>div</code> with all its children).</p>
  
  <p>With clicking on the print button, I go through every element on the page and style it as follows:</p>
  
  <ul>
  <li><p>The div to print is set to the class <code>printme</code> which styles the <code>top</code> and <code>left</code> properties to 0 and sets <code>position</code> to <code>absolute</code>.</p></li>
  <li><p>The div to print's children are left alone</p></li>
  <li><p>If the element is a parent of the div to print, I add the class <code>print-visibility-hide</code> which sets <code>visibility: hidden</code>.</p></li>
  <li><p>Otherwise, I add a class which sets <code>display: none</code>. The output of this is shown below.</p></li>
  </ul>
  
  <p>Everything works fine except that a blank page prints - which I am presuming is due to the parent divs using <code>visibility: hidden</code> to hide content and therefore still taking up space.</p>
  
  <p>Is there any way to print my div and somehow remove or collapse this extra space?</p>
  
  <p><strong>HTML</strong> - I end up with something like the following (with all the content removed for conciseness):</p>
  
  <pre><code>&lt;body class="print-visibility-hide"&gt;
    &lt;div class="page-container print-visibility-hide"&gt;
      &lt;div class="main print-visibility-hide"&gt;
        &lt;div class="main-content d-section-top print-visibility-hide" id="main-content" style="background: transparent none repeat scroll 0% 0%; margin-left: 145px;"&gt;
          &lt;div id="gemwrapper" class="gemwrapper print-visibility-hide" style="display: block;"&gt;
            &lt;div class="gem-content-wrapper d-item d-section print-visibility-hide"&gt;
              &lt;div class="gem-content-main gems print-visibility-hide"&gt;
                &lt;div class="print-visibility-hide"&gt;
                  &lt;div style="display: block;" id="s-g1353" class="print-visibility-hide"&gt;
                    &lt;table class="print-visibility-hide"&gt;
                      &lt;tbody class="print-visibility-hide"&gt;
                        &lt;tr class="item tools print-visibility-hide"&gt;
                          &lt;td class="textarea print-visibility-hide"&gt;
                            &lt;div id="gparent1353" class="textarea print-visibility-hide"&gt;
                              &lt;div id="gx1353" class="printme"&gt;
                                &lt;pre&gt;
  This is the text I am printing which can be any length.&lt;/pre&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@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;
    }
  }
  </code></pre>