CSS打印布局-在单页上打印
CSS打印布局-在单页上打印
提问于 2011-12-02 01:45:07
我被卡住了，SO档案也帮不了我。也许我找错地方了。下面是一个简短的故事：
- 我有一个观点，我需要在一整页上打印出来。我不能有第二页，我需要它在页面上尽可能大。
- 解决方案必须具有合理的跨浏览器兼容性(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%是问题所在，但我确保图像的纵横比小于页面(即使有任何边距)。基本上，全宽的图像应该不会导致分页。我做错了什么&我需要改变什么？任何帮助我们都很感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-12-28 00:37:52
我认为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;}
}Stack Overflow用户
发布于 2011-12-09 08:03:46
听起来你的形象太大了。既然图像是自定义大小的，为什么不设置
img { height: 100%; }而不是width？这至少可以确保它不会溢出到第二页。
还请记住，打印机比浏览器更易变。您也许能够勉强占用打印机上的每一寸空间，但其他人的打印页边距可能会显著不同，从而毁掉您所有的辛勤工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8345857
复制相关文章
相似问题