css - una - mozilla

Firefox imprime solo la primera página y corta la página de la derecha

Question

Tuve un gran problema con la impresión desde Firefox (cualquier versión, la mía es 16.0.2, pero incluso las compilaciones Aurora devolvían lo mismo). Al imprimir la página, Reducir para que quepa en la vista previa de impresión no funciona. La única manera, cómo ajustar la página en el papel es seleccionando Zoom 70% en el mismo cuadro de diálogo. Otro problema: imprime solo la primera página. ¿Qué hacer?

Answer 1

Necesitaba adaptar el archivo CSS para imprimir, así que hice uno. Funciona impecablemente en cualquier lugar, pero no en Firefox. ¿Cual fue el problema?

Primero, traté de especificar Ancho y alto para BODY y HTML en el archivo print.css. Que los márgenes, etc.

Más tarde descubrí cuál era el problema: el archivo CSS estándar contenía lo siguiente:

body {
 ...
 overflow-x: hidden;
 overflow-y: scroll;
}

Así que agregué lo siguiente en el archivo print.css:

body {
 overflow-x: visible;
 overflow-y: visible;
}

Supongo que, si solo se especificara el desbordamiento en el CSS, no -x y -y, necesitaría especificar solo el desbordamiento: visible en el archivo print.css.

La impresión desde Firefox funciona ahora como debería. Solo pensé que esto podría ayudar a alguien que tiene un extraño comportamiento de impresión en Firefox.

Answer 2

Además de la respuesta de Kokesh, algunas veces se atribuyen

display: table

genera este problema también Entonces, necesita cambiarlo a "bloquear" u otro que se ajuste a sus necesidades.

Answer 3

Probé las soluciones sugeridas en otras respuestas, pero no me solucionaron el problema. Después de una gran cantidad de investigación y prueba y error, he encontrado este artículo por una lista aparte. Era escéptico porque es muy viejo, pero dice que:

Si un elemento flotante se extiende más allá de la parte inferior de una página impresa, el resto del flotador desaparecerá de manera efectiva, ya que no se imprimirá en la página siguiente.

Como tengo un gran contenedor flotante pensé que lo probaría. Entonces, hice una mezcla de las otras respuestas y este artículo y se me ocurrió esto:

body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
}

/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak { 
    height: 100%; 
    display: block;
    flex: none;
    float: none;
}
.l-content,
.l-sidebar {
    float: none;
}

Así que básicamente:

1. Configuración del cuerpo al overflow: visible
2. Configuración de elementos que se comportan como envolturas para display: block , eliminar todos flex estilos flex y restablecer la altura si es necesario
3. Eliminar el float en contenedores largos

¡Esa mezcla funcionó para mí! Estoy tan feliz que pensé en compartir :)