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

Posted 2023-03-06

【中文标题】具有滚动条的页面 div，需要在打印时显示整个 div 内容

【英文标题】：Page div that has scroll bars, need to show entire div contents on print

【发布时间】：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;

还是不行

【参考方案1】：

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

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


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