I ran into Firefox’s CSS printing bug that would only print one page and let the content overflow (without clipping the page). The actual bug is documented here by Mozilla.
After scouring the Net for a fix, I found that it can be caused due to a number of reasons. Here’s the list of fixes that should help you out if you’re facing this bug:
You need to unfloat all floated elements in your CSS for print media, like so:
float: none !important;
Overflow must be set to visible for elements that have might have fancy overflow settings:
overflow: visible !important;
It’s always good to set this property for the <body> tag (or any other topmost parent element that is housing contents to be printed). Additionally, in some cases, overflow: scroll might work in some cases instead of overflow: visible. It greatly depends on your layout.
If your elements are positioned absolutely, then you might need to position them relatively:
If the height of your body is set to 100%, that may also cause a problem. Try unsetting this property.
Thanks to Gérald Champavert for pointing out that setting width to ‘auto’ for container divs might also help in solving the problem.