How to print scrollable div content

Question

There is a website on which I would like to print the contents of a div . The problem is that the div is scrolling and I cannot print all the content. I tried display:none in all divs except the one I want to print, and then used the Awesome Screenshot extension for Google Chrome, but it will not scroll only this div.

I read about using Javascript in HTML, I guess, but I don't know how to use this code. This is not my site, so how can I add this code to print content?

Answer 1

I'm not sure which website you use, but in IE you can open the F12 developer tools, find the div you want to display, and change the style on the fly:

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

This will cause the div to display all content, without scrollbars ... hope this helps!

Answer 2

Without seeing the page or without knowing its layout, it is difficult to understand what to offer, what will not look terrible.

But, if you hide all other materials (in the print stylesheet, I suppose), you can add:

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

to display all content at once.

Answer 3

Use this JS function:
Print DIV 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 answers of @ Porschiey and @ Paul Roub with a little addition.

Their solution really helped me in most cases, except in some cases where for the <div> I wanted to print, CSS was set to position: fixed . In the resulting print, this will usually only contain content that could match the actual size of the <div> on the loaded page.
So, I also had to change the CSS position attribute to something like relative so that everything could be 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; }