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

问题描述 投票:0回答:1
这里是短篇小说:

我有一个观点,我需要在一个完整页面上打印。我没有第二页,我需要在页面上尽可能大。
    Sloute必须合理地跨浏览器兼容(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%是问题所在,但是我确保图像宽高比小于页面(即使有任何边距)。基本上,完全宽度的图像不应导致页面上断。我在做什么错,我需要改变什么?任何帮助都将受到赞赏...

我认为CSS细节的挫败感是,答案必须针对我自己的项目量身定制。感谢@blahdiblah和其他建议。解决方案的混合导致了接近完美的结果,尽管当然仍然给我带来了问题...
这与所有填充/边距样式的硬重置有关,然后进行大量的标记,用于填充,宽度,高度等。基本上,我用高度填充了页面,然后掉入100%宽的物体中。结果是在8.5x11页面上的最大覆盖范围,零溢出到第二页。

!important

听起来您的图像太大了。 由于图像是定制大小的,为什么不设置

html printing css stylesheet
1个回答
21
投票

? 这至少可以确保它不会溢出到第二页。

考虑到打印机比浏览器更可变。  您也许可以在打印机上的每一英寸空间中淘汰,但是别人的印刷余量可能会大不相同,并破坏了您所有的辛勤工作。
    

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.