“ @media print”根据父元素的高度打印多页

时间:2019-02-15 01:46:35

标签: css3 media-queries

我正在尝试使用@media查询打印模式内容。此方法有效,除非页面上的内容足够长,否则“打印”对话框将打印多个空页面。

有没有办法让它忽略外部元素的高度?

<html>
<style>
    .one {
        height: 2000px;
        background-color: aliceblue;
    }

    .print {
        height: 100px;
        width: 150px;
        background-color: black;
        margin: auto;
        color: rgb(255, 255, 255);
    }

    @media print {

        body,
        body * {
            visibility: hidden;
        }

        .print {
            visibility: visible;
        }
    }
</style>


<body>
    <div class="one">
        Hello
        <div class="print">
            Goodbye
        </div>
    </div>
</body>
</html>

(在原始代码中,我正在打印图像并实际上获得每页的图像)

0 个答案:

没有答案