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

571 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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