Html 打印可滚动div的内容

我有一个以可滚动div显示的合同。我想让我的用户能够打印可滚动div的内容。该div大约有三页长。我正在为这个应用程序使用bootstrap，并尝试了“visible print”css类。当我现在测试打印功能时，chrome打印预览屏幕中只有可滚动div顶部的内容显示在垂直滚动条上，它会切断其余内容

CSS:

HTML:

试试这个

  @media print {
                 #scrollableDiv{
                  width: 100%;
                  height: 100%;
                 }
               .visible-print{
                 display: block;
                 width: auto;
                 height: auto;
                 overflow: visible;  
                }
               }

---

虽然这不是您的解决方案的确切答案，但您可以查看以下示例：

---

该示例中的表格位于可滚动区域内，整个表格呈现为PDF格式。我们开发了此渲染解决方案，以克服基于浏览器的简单打印中的许多限制。

Sun_Sparxz上面的回答足够可靠，但我想补充一个您可能遇到的棘手问题

---

几个小时后，我意识到我的身体标签上有一个“位置：固定”的标签，它阻止了上述解决方案的工作。请确保删除该选项，否则打印逻辑可能无法工作。一旦我这样做了，媒体标签就按预期运行了。

这个问题已经困扰了我几个小时：在您的CSS说明中，确保在@media print部分下重新定义之前，已定义了#scrollableDiv和.visible print，否则它将无法工作

#scrollabeDiv

是唯一需要打印的东西吗？您是否考虑过在空白窗口和

window.print（）中打开相同的内容，以避免打印页面的其余部分？这对你有用吗？这是可能的。有没有一种方法可以在不牺牲用户体验的情况下做到这一点？我不确定用户对于在单独的页面/选项卡上呈现合同，然后点击打印按钮会有什么感觉。我觉得在新窗口中打开可打印内容是可以的。您可以通过在目标计算机上运行
window.print（）
来触发打印命令，这样用户就不必实际点击打印按钮。请尝试@Sun_Sparxz给出的答案，并告诉我们它是否有效。在chrome的打印预览中仍然只呈现div的第一页，旁边有滚动条。我尝试了一下，得到了非常相似的结果。页面上又显示了几行文字。我还是很困惑。今晚我将继续研究这个问题，并向大家汇报。我有大约20个样式表，我仔细检查了每一个样式表，看看是哪一个导致了错误。。我发现了一个应该被删除的旧表，这是导致错误的原因。然后我添加了你的@media打印代码，效果非常好。非常感谢。
<div id="scrollableDiv" class="margin-bottom-20">
    <div class="visible-print">
        <!-- CONTRACT CONTENTS HERE -->
    </div>
</div>

  @media print {
                 #scrollableDiv{
                  width: 100%;
                  height: 100%;
                 }
               .visible-print{
                 display: block;
                 width: auto;
                 height: auto;
                 overflow: visible;  
                }
               }