我想打印一个网站的div 内容。问题是 div 是可滚动的，我无法打印所有内容。我已经在所有 div 上尝试了display:none，除了我要打印的那个，然后使用了 Google Chrome 的 Awesome Screenshot 扩展，但它不会只滚动那个 div。
我猜我已经读过关于在 HTML 中使用 Javascript 的文章，但我不知道如何使用该代码。这不是我的网站，那么如何注入该代码以便打印内容？
【问题讨论】：
标签： javascript css html
我不确定您使用的是哪个网站 - 但在 IE 中您可以打开 F12 开发人员工具，找到您要显示的 div，然后即时修改样式：
{
display: block;
width: auto;
height: auto;
overflow: visible;
}
然后它会导致 div 显示它的所有内容，没有滚动条......希望这会有所帮助！
【讨论】：
如果不看页面或不知道它的布局，很难知道该建议什么看起来不可怕。
但是，如果隐藏所有其他内容（我假设在打印样式表中）有效，那么您可以添加：
@media only print {
#idOfYourDiv {
width: auto;
height: auto;
overflow: visible;
}
}
一次显示所有内容。
【讨论】：
我为此苦苦挣扎了几个小时，终于注意到问题是某些父标签阻止了 div 完全可见，而是在打印件上显示了来自某些父标签的滚动条。
因此，最终有效的解决方案是将所有规则（在其他答案中提到）应用于所有可能位于中间的父标签，还包括 !important 规则，这样它们就不会被绕过。
像这样：
@media print {
body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
display: block !important;
position: relative !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
margin-left: 0 !important;
}
}
这几乎适用于我的项目中的任何情况。
【讨论】：
使用这个 JS 函数：
可打印的 DIV 是 div1
function printpage(){
var originalContents = document.body.innerHTML;
var printReport= document.getElementById('div1').innerHTML;
document.body.innerHTML = printReport;
window.print();
document.body.innerHTML = originalContents;
}
【讨论】：
div 内容（类似结构的小表格）的另一个技巧。
我的回答是基于@Porschiey和@Paul Roub给出的答案，稍加补充。
他们给定的解决方案在大多数情况下都对我有用，除了我想打印的 <div> 的 CSS 设置为 position: fixed 的情况。在生成的打印中，这通常只包含能够适应加载页面上<div> 实际大小的内容。
因此，我还必须将位置 CSS 属性更改为 relative 之类的东西，以便可以打印所有内容。所以，对我有用的 CSS 是这样的：-
{
display: block; /* Not really needed in all cases */
position: relative;
width: auto;
height: auto;
overflow: visible;
}