2016-08-30 1 views
0

J'ai un modal avec un bouton d'impression dessus. Quand quelqu'un frappe ce bouton d'impression J'utiliseÉliminer l'espace supplémentaire en utilisant @media print {body * {visibility: hidden;}}

@media print { 
    body * { 
    visibility: hidden; 
    } 

pour cacher les choses que je ne veux pas imprimer, puis en utilisant « visibility: visible » sur les choses que je ne veux imprimer.

Cela fonctionne très bien, sauf si quelqu'un a fait défiler certains avant de lancer le modal. Dans ce cas, il ajoute le montant que l'on a fait défiler vers le haut de la page imprimée. Y a-t-il un moyen d'éliminer cet espace supplémentaire?

Merci d'avance.

+0

Difficile à dire sans un exemple en action. Il suffit de jeter le buste là-bas, est-ce un cas de vouloir 'display: none' à la place? – musefan

+0

'Affichage: aucun;' ne réserve aucun espace pour l'objet caché, visibilité: caché; Est-ce que. – rsn

+0

Oui, display: none doit être utilisé sur les éléments que vous ne souhaitez pas afficher. Mais si vous souhaitez que la mise en page soit spécifique à une impression, vous devez d'abord mettre en page la page à imprimer, puis la tester. J'ai eu des éléments qui se sont déplacés sur moi quand je l'ai fait. Affichage: aucun ne va cacher tous les éléments. Disons que vous avez une bannière en haut de la page que vous souhaitez masquer en impression. Utilisez display: none, sinon l'espacement des bannières s'affichera en haut de l'impression. Aussi, si vous voulez être sûr, réglez la hauteur et la largeur des éléments que vous voulez cacher à '0' – ClosDesign

Répondre

0
@media print{ 
    body{display:block; height:100%} 
    #banner, .hideForPrint{display:none} 
}