ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML ドキュメントを印刷すると余分な空白ページが表示されるのはなぜですか?

HTML ドキュメントを印刷すると余分な空白ページが表示されるのはなぜですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-31 21:32:291050ブラウズ

Why Are Extra Blank Pages Appearing When I Print My HTML Document?

印刷中に余分な空白ページが表示されないようにする方法

HTML ドキュメントを印刷するときに、印刷前に余分な空白ページが表示される問題が発生することがあります。または意図したコンテンツの後に。これはイライラさせられ、貴重な紙を無駄にする可能性があります。この問題を解決するために、CSS メディア クエリとページの高さの調整を含むソリューションを紹介します。詳細を詳しく見てみましょう:

提供された HTML コードでは、CSS プロパティ page-break-after: always; を使用しています。各 .print div の後に改ページを強制します。ただし、この方法では、ドキュメントの先頭または末尾に余分な空白ページが印刷される可能性があります。

これを回避するには、メディア クエリを使用して印刷スタイルシートをターゲットにすることを検討してください。これを実装する方法は次のとおりです。

<code class="css">@media print {
    html, body {
        height: 99%;    
    }
}</code>

このメディア クエリでは、html 要素と body 要素の高さを 99% に設定します。これにより、必要に応じてコンテンツが複数のページに分散され、最後に空のページが生成されるのを防ぐことができます。

ページの高さを調整することで、印刷に使用できるスペースの量を制御できます。これにより、余分な空白ページが不必要に追加されるのを防ぎ、効率的で用紙を節約した印刷を実現します。

以上がHTML ドキュメントを印刷すると余分な空白ページが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。