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%是问题,但我确保图像纵横比小于页面(即使有任何边距)。基本上,全幅图像不应该导致分页。我在做什么错&我需要改变什么?任何帮助表示赞赏...
我认为对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;}
}
这听起来像你的形象太大了。由于图像是自定义尺寸,为什么不设置
img { height: 100%; }
,而不是width
?这至少可以确保它不会溢出到第二页。
还要记住,打印机比浏览器更加变化。您可能能够在您的打印机上留出每一寸空间,但其他人的打印空间可能会有很大差异,并会毁掉您的所有努力。
我试过了。我会重新发布我的最新尝试。它仍然让我发疯,因为将HTML&BODY设置为宽度:100%使它们比页面更宽。我认为这很奇怪。身高也做了一些时髦的东西,但也许这是最好的方式去。 – Nuby
我认为一个图表可能有助于可视化您的问题。我不确定现在到底是什么问题。 –
我不知道我可以在没有增加复杂功能的情况下绘制图表。它是一张8.5“x11”的纸片,里面有一张图片。当我将图像放大到100%宽度时,我无法在没有创建额外空白页(在Chrome和FireFox中)的情况下打印它。 – Nuby
尝试将其设置为95%。尝试一些价值,直到它适合在一个页面上。您也可以尝试删除所有边距和填充(例如'* {padding:0; margin:0}')。另请注意,浏览器会打印页眉和页脚,因此可用空间的比例与空白页面的比率不同。 – Gerben