Saltar al contenido

Creación de encabezados y pies de página con CSS para imprimir

Solución:

Poner un elemento en 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 (funciona en Flying Saucer)

Para incluir ambos encabezado y pie de página en las páginas (elaborando una excelente respuesta de @Adam):

<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 se repita en cada página, puede ser necesario definirlo. ANTES DE otro contenido corporal (para contenido de varias páginas)

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *