CSS Print Layout - 在单页上打印

我被卡死了，SO档案没有帮助我。也许我在找错地方。这里有一个小故事：CSS Print Layout - 在单页上打印

我有一个观点，我需要打印在一个完整的页面上。我不能有第二页，我需要它在页面上尽可能大。
解决方案必须具有合理的跨浏览器兼容性（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％是问题，但我确保图像纵横比小于页面（即使有任何边距）。基本上，全幅图像不应该导致分页。我在做什么错&我需要改变什么？任何帮助表示赞赏...

来源

2011-12-01 Nuby

我认为一个图表可能有助于可视化您的问题。我不确定现在到底是什么问题。 –

我不知道我可以在没有增加复杂功能的情况下绘制图表。它是一张8.5“x11”的纸片，里面有一张图片。当我将图像放大到100％宽度时，我无法在没有创建额外空白页（在Chrome和FireFox中）的情况下打印它。 – Nuby

尝试将其设置为95％。尝试一些价值，直到它适合在一个页面上。您也可以尝试删除所有边距和填充（例如'* {padding：0; margin：0}'）。另请注意，浏览器会打印页眉和页脚，因此可用空间的比例与空白页面的比率不同。 – Gerben

我认为对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;} 
}

来源

2011-12-27 16:37:51 Nuby

这听起来像你的形象太大了。由于图像是自定义尺寸，为什么不设置

img { height: 100%; }

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

还要记住，打印机比浏览器更加变化。您可能能够在您的打印机上留出每一寸空间，但其他人的打印空间可能会有很大差异，并会毁掉您的所有努力。

来源

2011-12-09 00:03:45 blahdiblah

我试过了。我会重新发布我的最新尝试。它仍然让我发疯，因为将HTML＆BODY设置为宽度：100％使它们比页面更宽。我认为这很奇怪。身高也做了一些时髦的东西，但也许这是最好的方式去。 – Nuby

CSS Print Layout - 在单页上打印

回答

相关问题