我有一个观点,我需要在一个完整页面上打印。我没有第二页,我需要在页面上尽可能大。
<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细节的挫败感是,答案必须针对我自己的项目量身定制。感谢@blahdiblah和其他建议。解决方案的混合导致了接近完美的结果,尽管当然仍然给我带来了问题...
这与所有填充/边距样式的硬重置有关,然后进行大量的标记,用于填充,宽度,高度等。基本上,我用高度填充了页面,然后掉入100%宽的物体中。结果是在8.5x11页面上的最大覆盖范围,零溢出到第二页。
!important
听起来您的图像太大了。 由于图像是定制大小的,为什么不设置
? 这至少可以确保它不会溢出到第二页。
考虑到打印机比浏览器更可变。 您也许可以在打印机上的每一英寸空间中淘汰,但是别人的印刷余量可能会大不相同,并破坏了您所有的辛勤工作。