Print contents of scrollable div

Question

I have a contract that is being displayed in a scrollable div. I'd like to give my users the ability to print the contents of the scrollable div. The div is roughly three pages long. I'm using bootstrap for this application and have tried the 'visible-print' css class available to me. When I test the print functionality now, only what's in the top of the scrollable div is displayed in the chrome print preview screen with a vertical scrollbar and it cuts off the remaining content.

CSS:

#scrollableDiv{
  width: 100%;
  height: 700px;
  overflow-y: scroll;
}

@media print,
 (-o-min-device-pixel-ratio: 5/4),
 (-webkit-min-device-pixel-ratio: 1.25),
 (min-resolution: 120dpi) {
}

@media print {
* {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  thead {
    display: table-header-group; /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  .visible-print {
    display: block !important;
    overflow: visible;
  }
}

HTML:

<div id="scrollableDiv" class="margin-bottom-20">
    <div class="visible-print">
        <!-- CONTRACT CONTENTS HERE -->
    </div>
</div>

Answer 1

Try this:

@media print {
  #scrollableDiv {
    width: 100%;
    height: 100%;
  }

  .visible-print {
    display: block;
    width: auto;
    height: auto;
    overflow: visible;  
  }
}