Crear encabezados y pies de página usando CSS para imprimir

Estoy creando un PDF usando Flying Saucer (que vacía CSS/HTML a iText en un PDF) y estoy tratando de usar CSS3 para aplicar un encabezado y pie de imagen cada pagina.Crear encabezados y pies de página usando CSS para imprimir

me gusta poner en esencia este div en la parte superior izquierda de cada página:

<div id="pageHeader"> 
    <img src="..." width="250" height="25"/> 
</div>

Mi CSS se ve algo como esto:

@page { 
    size: 8.5in 11in; 
    margin: 0.5in; 

    @top-left { 
     content: "Hello"; 
    } 
}

¿Hay una manera para mí para poner este div en el content?

Fuente

2012-03-15 Naftuli Kay

Poner un elemento a la parte superior de cada página:

@page { 
    @top-center { 
    content: element(pageHeader); 
    } 
} 
#pageHeader{ 
    position: running(pageHeader); 
}

Ver http://www.w3.org/TR/css3-gcpm/#running-elements (obras en platillo volante)

Fuente

2012-03-16 18:02:06 Adam

Vaya, ojalá hubiera sabido esto antes, he estado luchando 'fondo-image' a hacerlo de la manera menos completa. ¡Muchas gracias! –

Estoy tratando de adoptar esto, pero por alguna razón en Chrome, el encabezado solo se imprime en la primera página, y el pie de página solo en la última página. En Firefox esto está completamente roto. –

¿Funciona en Firefox o Chrome? Lo intenté ambos, pero no funciona para mí:/ – Jaro

Incluir tanto encabezado y pie de página en las páginas (elaboración de excelente respuesta de @ Adán):

<style> 
@page { 

    margin: 100px 25px; 
    size: letter portrait; 

    @top-left { 
     content: element(pageHeader); 
    } 

    @bottom-left { 
     content: element(pageFooter); 
    } 
} 

#pageHeader{ 
    position: running(pageHeader); 
} 

#pageFooter{ 
    position: running(pageFooter); 
} 

</style> 
<body> 
    <header id="pageHeader">something from above</header> 
    <footer id="pageFooter">lurking below</footer> 

    <div>meaningful rambling...</div> 
</body>

NOTA: para que el pie de página para repetir en cada página fuere será necesario definirlo ANTES otros contenidos cuerpo (para el contenido de varias páginas)

Fuente

2017-11-29 22:08:39 zeffren

Crear encabezados y pies de página usando CSS para imprimir

Respuesta

Cuestiones relacionadas