Printing only the contents of an iframe when a user selects file->print <p><strong>Problem:</strong></p> <p>I have an application which loads content from other servers into an <code>&lt;iframe&gt;</code>. Users want to be able to print the content in the iframe, which can sometimes be quite long and cause the iframe to scroll. When the print, only the area shown in the iframe's viewport is printed. The rest is cut off.</p> <p><strong>What I've tried:</strong></p> <p>Using <code>@media print</code> styles, I can hide all the other elements on the page and expand the iframe to 100% width and height. What I can't do AFAICT is resize it to the w/h of the actual content (using CSS alone), so if 100% isn't enough the content is truncated.</p> <p>I know this is solvable via javascript, but browsers do not consistently offer an event hook for file->print, so I can't run the javascript when it's needed.</p> <p>I could make a custom "print" button, so that the JS could run and the iframe would be correctly printed, but it doesn't allow for "Print Preview", because browsers don't offere a JS method for this.</p> <p>I'm stumped here, is there an answer? </p>