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

Question

我被严重困住,SO档案没有帮助我.也许我在寻找错误的地方.这是短篇小说:

• 我有一个观点,我需要在一整页上打印.我不能有第二页,我需要它在页面上尽可能大.
• 解决方案必须合理地跨浏览器兼容(IE9 +,Safari,Chrome,FF).
• 我已经有了PDF解决方案,但我也需要一个普通的香草打印解决方案.
• 该页面是使用Bootstrap构建的,但我已经覆盖了Print的大多数类.

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;}
}