Saint's Log

Printer Unfriendly HTML and CSS

I often run into websites with content that does not appear when I print certain web pages. This frustrated me enough to investigate why this happened on one of them. I created a small web page demonstrating the structure of one the offending web pages: overflow-demo-1.html. In this example, the body of the page contains a span with a fixed height of 1200px. Nested in it is a div whose height is set to 100%. This div contains content much taller than 1200px. Trying to print that web page (e.g. via the Save to PDF printer) results in a cut off PDF document without the last paragraphs. I noticed that the offending property is the overflow-y: auto style on the div! Disabling this property enabled all the content to appear on the printed page.

Unfortunately, proper web design (e.g. including printer-friendly stylesheets) appears to be less important for many websites these days. That markup also just looked unusual to me – I didn’t have a good justification for why other than the fact that I’m not used to seeing divs in spans. The HTML5 validator didn’t seem to like this structure either:

Element div not allowed as child of element span in this context.

Ready to check – Nu Html Checker

It looks like this is a common problem. The recommendation in some of these posts is to use overflow-y: visible instead.

• javascript – How to print scrollable DIV content – Stack Overflow
• html – When printing a web page, how to make overflowing content print on multiple pages? – Stack Overflow
• javascript – window.print() only prints the “viewable” part of the screen – Stack Overflow

Another scenario I have problems with is iframes on a page. I’m not sure these are easily patchable with CSS since there may be security concerns with iframes.