CSS を使用して印刷するときに余分な空白ページを回避するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して印刷するときに余分な空白ページを回避するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-10-29 23:38:29

オリジナル

569 人が閲覧しました

How to Avoid Extra Blank Pages When Printing with CSS?

CSS を使用した印刷中の余分な空白ページの回避

CSS を使用して Web コンテンツを印刷すると、ユーザーは余分な空白ページが表示される問題が発生する可能性があります。意図した印刷領域の前後に追加されます。この問題に対処するには、次の CSS メディアクエリを検討してください。

@media print {
    html, body {
        height: 99%;    
    }
}

ログイン後にコピー

説明:

この CSS メディアクエリは、html 要素と body 要素の height プロパティを次のように設定します。ドキュメントの印刷時は 99%。これにより、印刷コンテンツがほぼページ全体に表示され、余分な空白ページが追加されることがなくなります。

使用法:

このソリューションを使用するには、上記の CSS を追加します。内の HTML ドキュメントに対するメディアクエリセクション。必ず @media 印刷ルールを含めて、ドキュメントの印刷時にのみスタイルを適用するように指定してください。

例:

次の HTML コードは、使用法を示しています。 CSS メディアクエリの:

<code class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        .print {
            page-break-after: always;
        }

        @media print {
            html, body {
                height: 99%;
            }
        }
    </style>
    <script type="text/javascript">
        window.print();
    </script>
</head>
<body>
    <div class="print">fd</div>
    <div class="print">fdfd</div>
</body>
</html></code>

ログイン後にコピー

このソリューションを適用すると、CSS 改ページプロパティを使用しているときに余分な空白ページが印刷されるのを防ぐことができます。

以上がCSS を使用して印刷するときに余分な空白ページを回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。