Stampa piè di pagina nella parte inferiore della pagina in safari

Sto provando a posizionare un elemento div (footer) nella parte inferiore di una pagina stampata . In firefox funziona bene e il div si siederà lungo la parte inferiore della pagina stampata.Stampa piè di pagina nella parte inferiore della pagina in safari

Tuttavia, in Safari il piè di pagina si sposta su pagina stampata se la finestra del browser non è molto alta. per esempio. se la finestra del browser è alta 200 px, il piè di pagina si trova sulla stampa di circa 200 pixel verso il basso. Se il browser è alto 400 px, disegna il piè di pagina a 400 pixel verso il basso nella pagina.

Mi piacerebbe ottenere lo stesso comportamento in Safari che posso ottenere in Firefox, se possibile?

Il codice di base che sto usando per questo è:

<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: Sono felice se la soluzione richiede un hack ... ha solo bisogno di lavorare in Safari

fonte

2010-09-21 Richard

ho appena stampato questo fuori in Chrome (il motore di rendering di Safari stesso), e la linea ha mostrato in fondo ...

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

Si noti che ho media="print" sul tag stile. Per ulteriori informazioni, leggi Going to Print su ALA.

fonte

2010-09-21 13:44:11

Grazie. Non avevo capito che potevi specificare una dimensione in pollici/cm. – Richard

Unità assolute in CSS: http://www.w3.org/TR/css3-values/#absolute-lengths –

Holy smokestacks! Aggiungendo semplicemente l'altezza/larghezza in pollici al corpo {}, Chrome 26 ridimensiona magicamente la pagina web per adattarla alla pagina stampata. Non avevo idea che il supporto per la stampa fosse così ... fantastico. Questo ha radicalmente semplificato gli hack CSS che stavo usando. Grazie mille per avermi ricordato il supporto dei pollici del CSS, Mr. Stodola. –

Hai provato questa versione?

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

so che funziona nei browser, ma non sono sicuro di stampa.

fonte

2010-09-21 13:47:08 Alex

Questo è il codice che uso. Nota Sto impostando sia l'html che l'altezza del corpo al 100% che è necessario per Chrome e Safari.

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

fonte

2012-08-15 05:16:08 tim

Stampa piè di pagina nella parte inferiore della pagina in safari

risposta

Problemi correlati