我打印时的额外空白页面(IE中除外) – 是我的打印css吗？

我正在使用print css来隐藏某些元素,并在我不需要它时停止分页符.用户可以选择在打印之前隐藏部分.

我的问题是,当我打印预览时,总会有一个额外的空白页面(最后在Chrome和Firefox中,在Opera的开头),我无法弄清楚原因. IE没有问题,没有额外的页面(这是令人震惊的…)

我非常感谢一些意见.我试过制作容器div page-break-after：avoid;和page-break-after：auto;但都没有奏效.同时取出table.plain {page-break-inside：avoid;没有什么区别.

当用户单击隐藏图标时,exclude类将添加到表中.这有效,并且带有排除类的任何内容都不会显示在打印中.用户想要打印的最后一页可能适合一页或不适合.

这是我的HTML：

<body>
    <div id="main">
        <div id="content">
            <div id="side" class="exclude">
                ...logo,etc,shown at side on screen...
            </div>            
            <div id="data">
                <table class="printOnly plain printHeader">
                    ...logo,to print at top...
                </table>                
                <div>
                    <table class="detail plain">
                        <tbody>
                            <tr>
                                <td class="rel">
                                    <div class="abs exclude visibility">
                                        <a href="#" class="show ico-show ico hid">Show</a>
                                        <a href="#" class="hide ico-hide ico">Hide</a>
                                    </div>
                                    <h3>Contact</h3>
                                </td>
                            </tr>
                            ...more tr with contact details...
                        </tbody>
                    </table>
                    ...more tables with other details...
                </div>
            </div> //data
        </div> //content
    </div> //main
</body>

这是我的打印css：

@media print {
    .exclude {
        display: none !important;
    }

    .printOnly {
        display:block !important;
    }

    div#data,div#data div {
        width: 98% !important;
        border: none !important;
    }

    table.plain { page-break-inside:avoid; }
}

非常感谢您的帮助:)

解决方法

大多数时候你会指定

html,body { width: 100%; height: 100%; }

浏览器中的打印驱动程序不喜欢这样.所以要解决这个问题,只需将其添加到print.css文件即可

html,body { height: auto; }

没有空白页打印.

该解决方案在page解释希望能帮到大家

原文地址：https://www.jb51.cc/css/216063.html

我打印时的额外空白页面(IE中除外) – 是我的打印css吗？

解决方法

相关推荐