@media print div: ¿Cómo resolver el texto de página superpuesto en el encabezado?

Question

Estoy usando @media para imprimir un encabezado en cada página al imprimir una pantalla en una página en Firefox. He puesto mi css así:

@media print { 
    div.printDivHeader { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.0em; 
    position: fixed; 
    display: block; 
    width: 100%; 
    height: auto; 
    top: 0; 
    } 
} 

El problema es el contenido de la segunda página se superpone con la cabecera div impresión. (es decir, en la segunda página, el encabezado no fuerza el contenido de la página hacia abajo, y entonces obtengo el texto escrito sobre el texto). ¿Hay alguna forma de manejar esto?

Answer 1

Algo con position: fixed; nunca empuja el contenido estático (o relativo). O hay un estilo para asegurarse de que no se superponen ... o se superponen.
Consulte this example JSFiddle, que utiliza su CSS.

El problema está en otro lugar.
¿Cómo el encabezado no se superpone con el texto en la primera página? ¿Tienes algo presionando el texto? Margin-top? ¿Qué?

¿Es posible compartir el original o un ejemplo simplificado? (Puede utilizar JSFiddle.)

Answer 2

Uhm creo que su debe utilizar

position:relative 

en lugar de

position:fixed 

Answer 3

Agregue esto a su regla de los medios de cabecera: bottom:3em; modificar el 3em a fin de que el contenido caber.

A continuación, agregue un selector div separada a la regla de su área de contenido:

div.printDivContent { 
    position: relative; 
    width: 100%; 
    top:3em; //match size of header 
    left:0px; 
    right:0px; 
} 

Answer 4

La clave CSS "caja-decoración-break" ayudaría cuando se establece en "clon". Ve: CSS Fragmentation

Puede crear una clase contenedora alrededor de su contenido con un margen arriba y abajo en el tamaño de su cabecera y el pie y luego box set-decoración-break para "clonar" en este contenedor.

#content { 
    box-decoration-break: clone; 
    margin-bottom: 90px; 
}