Comment éviter les pages vierges supplémentaires lors de l'impression avec CSS ?-tutoriel CSS-php.cn

Comment éviter les pages vierges supplémentaires lors de l'impression avec CSS ?

Linda Hamilton

Libérer： 2024-10-29 23:38:29

original

660 Les gens l'ont consulté

How to Avoid Extra Blank Pages When Printing with CSS?

Éviter les pages vierges supplémentaires lors de l'impression avec CSS

Lors de l'impression de contenu Web à l'aide de CSS, les utilisateurs peuvent rencontrer le problème d'une page vierge supplémentaire ajouté avant ou après la zone d’impression prévue. Pour résoudre ce problème, considérez la requête multimédia CSS suivante :

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

Copier après la connexion

Explication :

Cette requête multimédia CSS définit la propriété height des éléments html et body sur 99% lors de l'impression du document. Cela garantit que le contenu imprimé remplit presque toute la page, évitant ainsi l'ajout d'une page vierge supplémentaire.

Utilisation :

Pour utiliser cette solution, ajoutez le CSS ci-dessus media query à votre document HTML à l'intérieur du section. Assurez-vous d'inclure la règle d'impression @media pour spécifier que les styles ne doivent être appliqués que lors de l'impression du document.

Exemple :

Le code HTML suivant illustre l'utilisation de la requête multimédia 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>

Copier après la connexion

En appliquant cette solution, vous pouvez empêcher l'impression de pages vierges supplémentaires lors de l'utilisation des propriétés de saut de page CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!