调整页面内容的大小以适合一个打印页面

Posted 2023-02-23

【中文标题】调整页面内容的大小以适合一个打印页面

【英文标题】：Resize page contents to fit on one print page

【发布时间】：2012-09-15 22:37:47

【问题描述】：

这个问题 IMO 与 CSS 更相关，但我愿意接受任何解决方案。我正在尝试打印一个以 px 定义高度的网页（我也尝试过 %）。现在在 Safari 和 IE 8 及更高版本中发生了什么，页面内容不会在一页上打印。

当前设置

div.parent-container  
    height: 900px;  
  

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

发生了什么

它将在 FF 中的一页上打印所有内容，但在 IE 和 Safari 中，内容将分成两页，这对我的用户来说是个问题。我必须告诉他们设置 page-margins: 0.3 这绝对不是一种有效的方法。

我做了什么

我尝试了不同的@page 和特定于浏览器的黑客来使其工作，但它并没有证明是富有成效的，或者对我来说似乎效率不高（从不喜欢定制的浏览器黑客）。

我想要什么

使页面内容打印在一页上的 CSS/JS 解决方案可能类似于“缩小以适应”。

谢谢， 拉希

【问题讨论】：

问得很好。我希望所有新用户都会像您一样提出问题。 +1。

【参考方案1】：

打印设备通常以物理尺寸（英寸、厘米、英尺等）来测量其内容。像素宽度取决于显示器分辨率，因此不能依赖于每个输出设备。

如果您的页面以您喜欢的方式打印至关重要，您很可能需要一个专为打印而设计的 CSS 文件——使用英寸、厘米或任何您喜欢的格式。

看看这个previous post——我认为它会有所帮助。

【讨论】：

感谢您的回复。对于兼容 CSS3 的浏览器，条件语句似乎是一个不错的选择。问题是一些仍然坚持使用 IE7 的用户（我不关心 IE6）。我们有什么解决办法吗？

喜欢这个？ <!--[if IE 7]> body max-width:8.2in <![endif]-->