Html css 打印媒体查询仅打印第一页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25187715/
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 media query prints only first page
提问by Raja
I use Print Media Query to print a scrollable DIV on my webpage (Main DIV contains a sub DIV and table with several rows and custom styles from kendo grid). The window.Print() only prints one page in both IE 9 and Chrome chopping rest of the DIV contents. How would I make sure it prints all contents in multiple pages. I read similar posts for issue with Firefox but the solution of using overflow: visible !important did not work for me. Below is my style
我使用 Print Media Query 在我的网页上打印一个可滚动的 DIV（主 DIV 包含一个子 DIV 和带有多行和来自剑道网格的自定义样式的表）。window.Print() 只在 IE 9 和 Chrome 中打印一页，切割其余的 DIV 内容。我如何确保它在多个页面中打印所有内容。我阅读了有关 Firefox 问题的类似帖子，但使用 overflow: visible !important 的解决方案对我不起作用。下面是我的风格
Note: I've tried with position: absolute, height/width: 100% and setting same settings as below for Table, TBody, TR and TD, but no use.
注意：我尝试过 position: absolute, height/width: 100% 并为 Table、TBody、TR 和 TD 设置与下面相同的设置，但没有用。
@media print {
body * {
visibility: hidden;
}
#divname, #divname* {
visibility: visible;
}
#divname
{
overflow: visible !important;
float:none !important;
position: fixed;
left: 0px;
top: 0px;
display:block !important;
/*height:auto !important;*/
}
}
EDIT: I finally managed to print by reading from DOM like below. In case, if it helps someone
编辑：我终于设法通过从 DOM 中读取来打印，如下所示。万一，如果它帮助某人
`//get DIV content as clone
var divContents = $("#DIVNAME").clone();
//detatch DOM body
var body = $("body").detach();
//create new body to hold just the DIV contents
document.body = document.createElement("body");
//add DIV content to body
divContents.appendTo($("body"));
//print body
window.print();
//remove body with DIV content
$("html body").remove();
//attach original body
body.appendTo($("html"));`
With this, you can retain the client side events associated to the controls on page after rebinding.
这样，您可以在重新绑定后保留与页面上的控件关联的客户端事件。
回答by ktzhang
Try this: edit: using position absolute. Realized that position:fixed only creates one page since thats how it works (you cannot scroll with position:fixed). Absolute does the same thing but is expandable.
试试这个：编辑：使用绝对位置。意识到 position:fixed 只创建一页，因为它是如何工作的（你不能用 position:fixed 滚动）。Absolute 做同样的事情，但它是可扩展的。
@media print {
body * {
visibility: hidden;
}
#divname, #divname * {
visibility: visible;
}
#divname {
left: 0px;
top: 0px;
position:absolute;
}
p {
page-break-before: always;
}
}
.para {
font-size:x-large;
height:3000px;
}
回答by Dennis Richter
I got the same problem right now and tried almost everything (clearing floats, avoiding absoulte positioning, adding overflows, ...) without any effect.
我现在遇到了同样的问题，几乎尝试了所有方法（清除浮动、避免绝对定位、添加溢出等），但没有任何效果。
Then I found a fix, as simple that it hurts:
然后我找到了一个修复方法，很简单，它很痛：
body, #main-container {
height: auto;
}
I think this may is the solution only for some edge-cases, but as I didn't found this solution when I was searching before and fiddling around with many non-working-solutions I think it should at least be mentioned for people that don't get it working with the "usual tips".
我认为这可能是仅适用于某些边缘情况的解决方案，但是由于我之前在搜索并摆弄许多非工作解决方案时没有找到此解决方案，因此我认为至少应该为不工作的人提及它不要用“通常的技巧”来解决它。
回答by Mark Macneil Bikeio
CSS
CSS
@media print {
* { overflow: visible !important; }
.page { page-break-after:always; }
}
HTML
HTML
<div>
<div class="page">
Page 1 Contents
</div>
<div class="page">
Page 2 Contents
</div>
</div>
