Utilisation de sauts de page CSS, mais dans un DIV positionné de manière absolue

J'utilise ASP.NET AJAX ModalPopupExtender sur une page. La fenêtre contextuelle contient les détails d'une ou de plusieurs commandes client à imprimer. Chaque commande doit être sur une page séparée.Utilisation de sauts de page CSS, mais dans un DIV positionné de manière absolue

je devrais être en mesure d'utiliser le style CSS page-break-after, mais cela ne fonctionne pas dans ce scénario comme ModalPopupExtender provoque les contenant div à être mis à position: absolute.

Quelqu'un peut-il suggérer une solution de contournement?

Pour être complet, un exemple de page HTML illustrant le problème est présenté ci-dessous.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Printing Pagination</title> 
    <style type="text/css"> 
     div 
     { 
      padding: 10px; 
      margin: 10px; 
     } 
     div.outer 
     { 
      border: solid 5px green; 
      position: absolute; 
      top: 100px; 
      left: 100px; 
      width: 200px; 
     } 
     div.page 
     { 
      border: solid 5px red; 
     } 
    </style> 
    <style type="text/css" media="print"> 
     div.outer 
     { 
      border: none; 
     } 
     div.page 
     { 
      page-break-after: always; 
     } 
    </style> 
</head> 
<body> 
    <div class="outer"> 
     <div class="page"> 
      This should be on page 1 when printed 
     </div> 
     <div class="page"> 
      This should be on page 2 when printed 
     </div> 
     <div class="page"> 
      This should be on page 3 when printed 
     </div> 
    </div> 
</body> 
</html>

Source

2009-02-04 Richard Everett

Ne pouvez-vous pas simplement ajouter ce morceau de code à votre style d'impression?

div.outer { position: relative; }

Il est trompeusement simple, mais lors de l'impression, je doute le spectateur client/rapport ne voudrait rien à voir avec le positionnement et se soucierait plus sur le contenu ouais?

Source

2009-02-04 20:14:46

J'ai eu un problème similaire. J'utilise le plugin gridster, et j'ai un certain nombre de divs absolument positionnés. La solution à laquelle j'ai abouti consistait à utiliser margin-top pour les divs qui seraient coupées, les déplaçant ainsi en dessous du saut de page.

Si vous essayez de repositionner plusieurs éléments, et que vous utilisez Sass, vous pouvez essayer quelque chose comme:

@for $i from 1 through 10 { 
    &[data-SOME-ATTR="#{$i}"] { 
    margin-top: #{SOME_OPERATIONS}px; 
    } 
}

Source

2015-04-23 21:09:03

Utilisation de sauts de page CSS, mais dans un DIV positionné de manière absolue

Répondre

Questions connexes