CSS 打印布局 - 在单页上打印

Question

我陷入了困境，SO 档案对我没有帮助。也许我找错地方了。这是一个小故事：

• 我有一个视图需要打印在一个整页上。我不能有第二页，我需要它在页面上尽可能大。
• 解决方案必须具有合理的跨浏览器兼容性（IE9+、Safari、Chrome、FF）。
• 我已经有了一个 PDF 解决方案，但我还需要一个普通的打印解决方案。
• 该页面是用 Bootstrap 构建的，但我已经覆盖了大多数打印类。

HTML 页面的结构如下。我添加了一些内联 CSS 来自定义其中一些信息。

<div class="container">
  <div class="row">
    <div class="span16">

      <style type="text/css" media="all">
        @media print {
          html, body {
            margin: 0;
            padding: 0;
            background: #FFF; 
            font-size: 9.5pt;
          }
          .container, .container div {
            width: 100%;
            margin: 0;
            padding: 0;
          }
          .template { overflow: hidden; }
          img { width: 100%; }
        }
      </style>

      <div class="template_holder">
        <div class="template">
          <img src="some_big_image">
          <div>
            [PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE]
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我意识到在这里包含内联 CSS 的形式有点糟糕，但由于各种原因它必须覆盖它之前的一堆其他 CSS。我可以把它拉回来，但要点是这样的。当我打印时，我得到看起来正确的东西，再加上额外的第二页。当我缩小图像时，一切正常，但我需要图像来填充 DIV。

我认为将宽度设置为 100% 是问题所在，但我确保图像长宽比小于页面（即使有任何边距）。基本上，全宽图像不应导致分页。我做错了什么？我需要改变什么？任何帮助表示赞赏...

Answer 1

我认为 CSS 的这个细节令人沮丧的是，答案必须适合我自己的项目。感谢@blahdiblah 和其他人的建议。混合解决方案带来了近乎完美的结果，尽管 IE 当然仍然给我带来了问题......

这与所有填充/边距样式的硬重置以及大量 !important 标记有关用于填充、宽度、高度等。基本上我用高度填充页面，然后放入 100% 宽的对象。结果是 8.5x11 页面上的最大覆盖范围，而到第二页的溢出为零。

@media print {
  * { margin: 0 !important; padding: 0 !important; }
  #controls, .footer, .footerarea{ display: none; }
  html, body {
    /*changing width to 100% causes huge overflow and wrap*/
    height:100%; 
    overflow: hidden;
    background: #FFF; 
    font-size: 9.5pt;
  }

  .template { width: auto; left:0; top:0; }
  img { width:100%; }
  li { margin: 0 0 10px 20px !important;}
}

Answer 2

听起来你的图片太大了。既然图像是自定义大小的，为什么不设置

img { height: 100%; }

而不是宽度？这至少可以确保它不会溢出到第二页。

还要记住，打印机比浏览器更具可变性。您也许能够耗尽打印机上的每一寸空间，但其他人的打印边距可能会明显不同，从而毁掉您所有的辛勤工作。