How to print scrollable DIV content

Question

There is a website that I would like to print the div content of. The problem is that the div is scrollable and I\'m not able to print all the content. I\'ve tr

Answer 1

Make all parents visible

I've struggled some hours with this and finally noticed the problem was that some of the parent tags where preventing the div to be fully visible, and instead a scrollbar from some parent tags was being visible on the print.

So the final effective solution was to apply all the rules (mentioned in other answers) to all possible parent tags that could be in the middle, including also an !important rule so they wouldn't be bypassed.

Like this:

@media print {
  body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin-left: 0 !important;
  }
}

This applies for almost any case in my projects.

Answer 2

Without seeing the page or knowing its layout, it's hard to know what to suggest that won't look horrible.

But, if hiding all other content (in a print stylesheet, I assume) works, you may then be able add:

@media only print {
   #idOfYourDiv {
     width: auto;
     height: auto;
     overflow: visible;
   }
}

to show all the contents at once.

Answer 3

Use this JS function:
Printable DIV is div1

function printpage(){
    var originalContents = document.body.innerHTML;
    var printReport= document.getElementById('div1').innerHTML;
    document.body.innerHTML = printReport;
    window.print();
    document.body.innerHTML = originalContents;
}

Answer 4

My answer is based on the ones given by @Porschiey and @Paul Roub with a slight addition.

Their given solution did work for me in most cases except for some where the <div> that I wanted to print had a CSS set to position: fixed. In the resulting print, this would usually contain only the content that was able to fit in the actual size of the <div> on the loaded page.
So, I also had to change the position CSS attribute to something like relative so that everything could get printed. So, the resulting CSS that worked for me is this:-

{
    display: block; /* Not really needed in all cases */
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
}

Answer 5

I'm not sure what website you're using - but in IE you can open up F12 Developer tools, find the div you want to display, and modify the style on the fly:

{
display: block;
width: auto;
height: auto;
overflow: visible;
}

It would then cause the div to display all it's content, without scrollbars... hopefully this helps!