18

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

Rahi
  • 1,435
  • 1
  • 12
  • 20

1 Answers1

4

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.

Community
  • 1
  • 1
Dawson
  • 7,567
  • 1
  • 26
  • 25
  • Thanks for your reply. Conditional Statements seems to be pretty good option for CSS3 compliant browsers. Problem is for some users still stuck with IE7 (I don't care about IE6). Do we have any solution for that? – Rahi Sep 24 '12 at 14:16
  • Like this? `` – Dawson Sep 24 '12 at 16:08