具有滚动条的页面 div，需要在打印时显示整个 div 内容答案

【问题标题】：Page div that has scroll bars, need to show entire div contents on print具有滚动条的页面 div，需要在打印时显示整个 div 内容
【发布时间】：2019-08-20 12:05:51
【问题描述】：

我的页面上有一个 div 和表格：

<div id="tablediv">
    <table id="table">
         <tr><th>headers</th></tr>
         <tr><td>contents</td></tr>
    </table>
<div>

还有 CSS：

#tablediv {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
}

这样无论表格的高度如何，div都会滚动它，页面不会滚动。

我想让打印视图显示表格的整个长度，比如多页。但它只显示它可以放在第一页上的内容，其他 div/table 行没有其他页面。

如何使用@media print CSS 做到这一点？

【问题讨论】：

你试过了吗？ @media print{ .tablediv{ height:100%;overflow:visible;} }
还是不行

标签： html css browser printing media-queries

【解决方案1】：

尝试覆盖媒体查询中的高度。查询需要排在第二位，因此它会覆盖原始声明。

#tablediv {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
}

@media print { 
    #tablediv {
        max-height: auto;
        height: auto;
        overflow: visible;
    }
}

【讨论】：