Resize page contents to fit on one print page

Question

This problem IMO is more related to CSS but I am open to any solution. I am trying to print a webpage who's height is defined in px (I also tried %). Now What's happening in Safari and IE 8 and onwards, page contents will not print on one page.

Current Setup

div.parent-container{  
    height: 900px;  
}  

div.parent-container div.child-containers{  
    height:100%;  
} 

What's happening

It will print everything on one page in FF but in IE and Safari contents will split in to two pages which is heck of a problem for my users. I have to tell them to set page-margins: 0.3 which is definitely not an efficient way.

What I have done

I have tried different @page and browser specific hacks to make it work but it doesn't prove to be fruitful OR doesn't seem efficient to me( Never been a fan of customized browser hacks).

What I want

CSS/JS solution to make page contents print on one page may be something like 'Shrink to Fit'.

Thanks, Rahi

Answer 1

Printing devices usually measure their content in physical dimmensions (in, cm, ft, etc). Pixel width is dependent on monitor resolution, and thus can't be relied upon for every output device.

If it's crucial your page prints the way you'd like it, you'll most likely need a CSS file designed for printing -- one that uses inches, centimeters, or whatever you'd like.

Check out this previous post -- I think it will help.