调整页面内容以适合一个打印页面 [英] Resize page contents to fit on one print page

问题描述

这个问题IMO与CSS更相关，但我对任何解决方案都开放。我试图打印一个网页的高度是定义在px（我也试过％）。现在Safari和IE 8及以上版本发生了什么，页面内容不会在一个页面上打印。

当前设置

  parent-container {
 height：900px; 
} 
 
 div.parent-container div.child-containers {
 height：100％; 
} 
  

发生了什么 b

它会在FF的一个页面上打印一切，但在IE和Safari内容将分成两页，这是我的用户的一个问题。我必须告诉他们设置页面边距：0.3，这绝对不是一种有效的方法。

我做了什么

我尝试了不同的@page和浏览器特定的黑客来使它工作，但它并没有证明是富有成效OR似乎对我没有效率（从来没有一个风扇的自定义浏览器黑客）。

我想要的

CSS / JS解决方案一页可以是像缩小到适合。

感谢您，
Rahi

解决方案

测量其在物理尺寸（in，cm，ft等）中的内容。像素宽度取决于显示器分辨率，因此不能依赖于每个输出设备。

如果关键是您的页面打印你想要的方式，你很可能需要一个专为打印而设计的CSS文件 - 一个使用英寸，厘米或任何你想要的东西。

检查这个前一篇文章 - 我认为它会有所帮助。

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

解决方案

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.

这篇关于调整页面内容以适合一个打印页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！