Imprimer pied de page en bas de la page en safari

J'essaie de positionner un élément div (pied de page) au bas d'un page imprimée. Dans Firefox, cela fonctionne très bien et le div sera assis au bas de la page imprimée.Imprimer pied de page en bas de la page en safari

Cependant, dans Safari, le pied de page augmente la page imprimée si la fenêtre du navigateur n'est pas très grande. par exemple. Si la fenêtre du navigateur est de 200 pixels, le pied de page se trouve sur l'impression à environ 200 pixels vers le bas. Si le navigateur a une taille de 400 pixels, il trace le pied de page 400 pixels sur la page.

Je voudrais avoir le même comportement dans Safari que possible dans Firefox si possible?

Le code de base que je me sers pour cela est:

<html> 
    <head> 
     <title>Print footer at bottom of a printed page</title> 
     <style type="text/css"> 
      * { margin:0; padding:0; } 
      html, body { height: 100% !important; } 
      #footer { height:25px; border-top:solid 1px #000; 
         position:absolute; bottom:0; } 
     </style> 
    </head> 
    <body> 
     <p>Some content on the page here</p> 
     <div id="footer">This should appear at the very bottom of the printed page</div>  
    </body> 
</html>

Edit: Je suis heureux si la solution nécessite un hack ... il n'a besoin que de travailler dans Safari

Source

2010-09-21 Richard

Je viens imprimer ce dans (même moteur de rendu que Safari) Chrome, et la ligne a montré au fond ...

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Testing</title> 
    <style type="text/css" media="print"> 
     html, body { margin: 0; padding: 0; } 
     body { height: 11in; width: 8.5in; } 
     #footer { position: absolute; bottom: 0; } 
    </style> 
    </head> 
    <body> 
    <div id="footer"> 
     This will always print at the bottom 
    </div> 
    </body> 
</html>

Notez que je media="print" sur l'étiquette de style. Pour plus à ce sujet, lire Going to Print sur ALA.

Source

2010-09-21 13:44:11

Merci. Je n'avais pas réalisé que vous pouviez spécifier une taille en pouces/cm. – Richard

Unités absolues en CSS: http://www.w3.org/TR/css3-values/#absolute-lengths –

Holy smokestacks! Le fait d'ajouter simplement la hauteur/largeur en pouces à body {} permet à Chrome 26 de redimensionner la page Web en fonction de la page imprimée. Je n'avais aucune idée que son support d'impression était si ... génial. Cela a radicalement simplifié les hacks CSS que j'utilisais. Merci beaucoup de me rappeler le soutien de CSS de pouces, M. Stodola. –

Avez-vous essayé cette version?

http://www.themaninblue.com/experiment/footerStickAlt/

Je sais que cela fonctionne dans les navigateurs, mais pas sûr de l'impression.

Source

2010-09-21 13:47:08 Alex

Ceci est le code que j'utilise. Remarque: Je définis le html et la hauteur du corps sur 100%, ce qui est nécessaire pour Chrome et Safari.

@media print { 
    html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #footer { 
    position: absolute; 
    bottom: 0; 
    } 
}

Source

2012-08-15 05:16:08 tim

Imprimer pied de page en bas de la page en safari

Répondre

Questions connexes