HTML à imprimer avec une absolue postitions

Malheureusement, la CSS3 Module: Paginé Médias permet que tout cela arrive. Ce sont les règles concernant les pages qui sont trop grandes:

3.3.3. Le rendu des zones de page qui ne correspondent pas à une page de feuille de

Si une boîte de la page ne correspond pas à la page cible les dimensions de la feuille, l'agent utilisateur PEUT choisir (dans l'ordre de préférence) à:

• Rendu de la boîte de la page à la taille indiquée sur une grande page de la feuille.
• Tourner la page de la boîte de 90° si cela va rendre la page de la boîte de l'ajustement sur la page de la feuille.
• Échelle de la boîte de page pour l'adapter à la page. (Il n'est pas nécessaire de maintenir le ratio d'aspect de la page ou de l'un quelconque des éléments sur la page lors de la mise à l'échelle; toutefois, la préservation de l'aspect ratio est préférable.) [terminé par Chrome]
• Reformater le contenu de la page, y compris les "répandre" sur d'autres page de feuilles. [terminé par de nombreux autres ou les anciens navigateurs]
• Clip débordé de contenu (moins pratique).

L'agent de l'utilisateur devrait consulter l'utilisateur avant d'effectuer ces opérations.

3.3.4. Le positionnement de la boîte de la page sur la feuille

Lorsque la page de la boîte est plus petite que la taille de la page, l'agent utilisateur devrait centre de la boîte de la page sur la feuille car cela permettra d'aligner les pages en recto-verso et d'éviter la perte accidentelle de l'information qui est imprimé sur le bord de la feuille.

Et c'est la règle qui rompt tous vos positioned trucs:

3.7. Contenu à l'extérieur de la boîte de page

[...] Aussi, lorsque les boîtes sont en position absolue, ils risquent de finir
dans "qui dérange" lieux. Par exemple, les images PEUVENT être mis sur le
bord de la boîte de la page. De même, lorsque les boîtes utilisation fixe ou relatif
positionnement, ils PEUVENT aussi se retrouver à l'extérieur de la boîte de la page.

Un cahier des charges pour la mise en forme exacte de ces éléments se trouve en dehors de
la portée de ce document. Cependant, nous recommandons que les auteurs et les
les agents d'utilisateur d'observer les principes généraux suivants concernant
contenu à l'extérieur de la boîte de page:

• Les agents utilisateurs DEVRAIENT éviter de générer un grand nombre de page vide des boîtes à l'honneur le positionnement des éléments (par exemple, vous ne voulez pas
  imprimer 100 pages blanches). Notez, cependant, que la génération d'un petit nombre
  de page vide les boîtes PEUVENT être nécessaires pour l'honneur de la 'gauche' et 'droite'
  les valeurs de 'page-break-before' et 'page-break-after'.
• Les auteurs ne DEVRAIENT pas positionner les éléments dans incommode endroits juste pour éviter de les rendre. Au lieu de cela:
  • Pour supprimer la boîte de génération entièrement, définissez l'option 'affichage' propriété 'none'.
  • Pour fabriquer une boîte invisible, définir la "visibilité" de la propriété.
• Les agents utilisateurs PEUVENT manipuler des boîtes positionnées à l'extérieur de la boîte de la page de plusieurs façons, y compris les jeter ou de créer des zones de page pour
  à la fin du document.

Regarder le deuxième alinéa de l'article 3.7: Un cahier des charges pour la mise en forme exacte de ces éléments se trouve en dehors de la portée de ce document. Puisqu'il n'existe aucun autre document et aucune autre directive ensuite, le principe général à la suite de ce paragraphe, chaque navigateur peut faire ce qu'il veut.

C'est l'un des défauts qui sont actuellement dans ce module CSS3. Cependant, je pense que ces défauts ne peut pas être enlevé par un CSS4 ou révisé CSS3 module, comme la variété de feuilles de style et résultant des mises en page est trop énorme, trop couvrir. A noter aussi une petite note de bas de page donnée en CSS Profil d'Impression:

‡ L'imprimante PEUT ignorer positionné des éléments qui sont placés sur la page avant de la position de l'élément courant dans le flux normal.

Donc en gros, c'est pas possible de créer le même effet dans tous les navigateurs. Car pour le moment, la seule voie possible pour atteindre un portable document est de créer un fichier PDF avec une application tierce ou par l'intermédiaire d'une imprimante PDF et vos navigateur préféré. Toute autre voie est vouée à l'échec tant que recommandations de la W3C ne sont pas strictes, ou les fournisseurs de navigateur de mettre en œuvre ce qu'ils veulent.

Voir aussi:

• CSS3 Module: Paginé Médias (Projet de travail, de la dernière révision 2006)
• CSS Profil d'Impression (Projet de travail, de la dernière révision 2006)

Notes complémentaires

Si vous avez un tas de position:absolute éléments qui doivent être imprimés c'est parfois une bonne question de savoir si un élément doit être placée de façon absolue, ou si le même effet peut être obtenu en un peu différente, ou de manière plus facile. Notez également que vous devez utiliser display:none sur chaque élément qui n'est pas vraiment nécessaire pour les médias imprimés, tels que des publicités, des navigations, etc...

Faire de votre conteneur d'avoir la position relative. C'est la seule façon de garder les éléments en position absolue dans le même endroit à chaque écran et le papier. donc, si votre principal div (div, où l'ensemble de votre contenu est placé), ajoutez ce qui suit à votre fichier css:

#maindivname{position:relative;}

Devrait faire l'affaire.

Requêtes de média fera l'affaire -- check ce lien et à la question précédente, peut-être que cela aidera.
Suggestions pour le débogage des feuilles de style d'impression?

Media Query transition px en pouces/cm/tout ce qui est nécessaire pour les besoins d'impression.

Que la frontière/marge que vous avez mentionné, c'est probablement votre imprimante de la zone imprimable (la poignée de pointe). La plupart des imprimantes ont besoin de bord de saisir et d'alimenter le stock. C'est pourquoi, lorsque l'on imprime un fond perdu du document (l'encre à la bordure), il est imprimé sur du stock plus grande que nécessaire, puis réduits.