Imprimir pie de página en la parte inferior de la página en safari

Estoy tratando de colocar un elemento div (pie de página) en la parte inferior de una página impresa . En Firefox esto funciona bien y el div se ubicará en la parte inferior de la página impresa.Imprimir pie de página en la parte inferior de la página en safari

Sin embargo, en Safari el pie de página se mueve hacia arriba en la página impresa si la ventana del navegador no es muy alta. p.ej. si la ventana del navegador es 200px de alto, entonces el pie de página se encuentra en la impresión de aproximadamente 200px hacia abajo. Si el navegador mide 400px, dibuja el pie de página 400px en la página.

Me gustaría obtener el mismo comportamiento en Safari que puedo obtener en Firefox si es posible?

El código básico que estoy utilizando para esto es:

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

Editar: estoy feliz si la solución requiere un hack ... sólo necesita trabajar en Safari

Fuente

2010-09-21 Richard

que acaba de imprimir esto en Chrome (motor de renderizado misma como Safari), y la línea mostró en la parte inferior ...

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

en cuenta que tengo media="print" en la etiqueta de estilo. Para más información sobre esto, lea Going to Print en ALA.

Fuente

2010-09-21 13:44:11

Gracias. No me di cuenta de que puedes especificar un tamaño en términos de pulgadas/cm. – Richard

Unidades absolutas en CSS: http://www.w3.org/TR/css3-values/#absolute-lengths –

Holy chimeneas! Simplemente agregando el alto/ancho en pulgadas al cuerpo {} permite que Chrome 26 escale mágicamente la página web para que se ajuste a la página impresa. No tenía idea de que su soporte de impresión era tan ... impresionante. Esto simplificó radicalmente los hacks de CSS que estaba usando. Muchas gracias por recordarme el apoyo de CSS a las pulgadas, Sr. Stodola. –

¿Has probado esta versión?

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

sé que funciona en los navegadores, pero no está seguro acerca de impresión.

Fuente

2010-09-21 13:47:08 Alex

Este es el código que uso. Tenga en cuenta que estoy configurando html y body height al 100%, que es necesario para Chrome y Safari.

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

Fuente

2012-08-15 05:16:08 tim

Imprimir pie de página en la parte inferior de la página en safari

Respuesta

Cuestiones relacionadas