Html CSS 打印布局 - 在单页上打印
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8345857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Print Layout - Printing on a Single Page
提问by Nuby
I'm badly stuck and the SO archives aren't helping me. Maybe I'm looking in the wrong place. Here's the short story:
我被严重卡住了，SO 档案对我没有帮助。也许我找错了地方。这是一个简短的故事：
- I've got a view that I need to get printed on a single full page. I can't have a second page and I need it to be as large as possible on the page.
- Solution has to be reasonably cross-browser compatible (IE9+, Safari, Chrome, FF).
- I already have a PDF solution, but I need a plain vanilla print solution as well.
- The page is built with Bootstrap, but I've overridden most of the classes for Print.
- 我有一个观点，我需要在一个完整的页面上打印。我不能有第二页，我需要它在页面上尽可能大。
- 解决方案必须合理地跨浏览器兼容（IE9+、Safari、Chrome、FF）。
- 我已经有了一个 PDF 解决方案，但我还需要一个普通的普通打印解决方案。
- 该页面是使用 Bootstrap 构建的，但我已经覆盖了 Print 的大部分类。
The structure of the HTML page is as follows. I dropped in some in-line CSS in order to customize some of this information.
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>
I realize it's somewhat poor form to include in-line CSS here, but it has to override a bunch of other CSS that came before it for various reasons. I could pull it back out, but the gist of it is this. When I print, I get something that looks right, plus an extra second page. When I shrink the image down, everything is ok, but I need the image to fill the DIV.
我意识到在此处包含内嵌 CSS 的形式有些糟糕，但由于各种原因，它必须覆盖之前出现的一堆其他 CSS。我可以把它拉回来，但它的要点是这样的。当我打印时，我得到了一些看起来不错的东西，再加上额外的第二页。当我缩小图像时，一切正常，但我需要图像来填充 DIV。
I thought setting width to 100% was the issue, but I made sure the image aspect ratio was smaller than the page (even with any margins). Basically, the image at full width should not cause a page break. What am I doing wrong & what do I need to change? Any help is appreciated...
我认为将宽度设置为 100% 是问题所在，但我确保图像纵横比小于页面（即使有任何边距）。基本上，全宽图像不应导致分页。我做错了什么&我需要改变什么？任何帮助表示赞赏...
采纳答案by Nuby
I think the frustration with this detail of CSS is that the answer has to be tailored to my own project. Thanks to @blahdiblah and other for suggestions. A mix of solutions led to near-perfect results, though of course IE still gives me problems...
我认为 CSS 的这个细节令人沮丧的是，答案必须适合我自己的项目。感谢@blahdiblah 和其他人的建议。混合的解决方案导致了近乎完美的结果，当然 IE 仍然给我带来问题......
It had to do with a hard reset of all padding/margin styles and then lots of !importantmarkers for padding, width, height, etc. Basically I filled up the page with height and then dropped in 100% wide objects. The result is maximum coverage on an 8.5x11 page with zero spillover to a second page.
它与所有填充/边距样式的硬重置有关，然后是大量!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;}
}
回答by blahdiblah
It sounds like your image is just too big. Since the image is custom-sized, why not set
听起来你的图片太大了。既然图片是自定义大小的，为什么不设置
img { height: 100%; }
instead of width? That would at least ensure that it didn't spill over to a second page.
而不是width？这至少可以确保它不会溢出到第二页。
Bear in mind also that printers are more variable than browsers. You may be able to eke out every last inch of space on your printer, but someone else's might have significantly different print margins and ruin all your hard work.
还要记住，打印机比浏览器更易变。您可能能够勉强挤出打印机上的每一寸空间，但其他人的打印边距可能会大不相同，从而毁了您所有的辛勤工作。
