title: Resize page contents to fit on one print page
body: <p>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. </p>
  
  <p><strong>Current Setup</strong></p>
  
  <pre><code>div.parent-container{  
      height: 900px;  
  }  
  
  div.parent-container div.child-containers{  
      height:100%;  
  } 
  </code></pre>
  
  <p><strong>What's happening</strong></p>
  
  <p>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.</p>
  
  <p><Strong>What I have done</strong></p>
  
  <p>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). </p>
  
  <p><strong>What I want</strong></p>
  
  <p>CSS/JS solution to make page contents print on one page may be something like 'Shrink to Fit'. </p>
  
  <p>Thanks,
  Rahi</p>