0

hola tengo el siguiente problema: yo tengo el siguiente codigo en mi styles.scss

html,body {height: 100%;}



El cual hacer que mi app se expanda por toda la pantalla y funciona correctamente imagen demostrativa del codifgo anterior funcionando


el detalle viene cuando quiero hacer la impresion de algo que estoy viendo en pantalla Pero la pagina es scroolable, lo que pasa es que solo me permite imprimir lo que esta actualmente en pantalla y un poco mas de eso pero no la pagina completa.


imagen de problema de impresion


En la imagen anterior el horario va de 7am a 7pm y como se logra observar apenas llega a las 12m, el problema es causado por el codigo en css html, { height: 100%; } si yo lo remuevo la impresion del navegador funciona correctamente


impresion del navegador funcionando


Pero al visualizar las paginas con poco contenido este se ve reducido a una pequeña parte de la pantalla


prblema al remover el codigo css `


alguien sabe que puedo hacer para que ambos comportamientos. tanto como la impresion y el expandir el html al tamaño de la pantalla funcionen??

5
  • 1
    puedes usar los media query y que unos estilos apliquen únicamente para print y otros para screen @media print { /*estilos*/ } Commented el 6 nov. 2020 a las 15:20
  • Gracias por responder amigo exactamente eso estoy implementando para quitar algunos elementos innecesarios pero no se como hacer para remover el elemento height del css desde el media query es decir, se como modificar el tamaño del mismo pero no como removerlo que sería lo mismo a no tener ese atributo Commented el 6 nov. 2020 a las 18:14
  • intenta poniendo un valor height: auto; Commented el 6 nov. 2020 a las 18:46
  • unset o inherit también pueden ir Commented el 6 nov. 2020 a las 19:21
  • muchas gracias por comentar amigos efectivamenete con uso de "unset" se soluciono mi problema @media print { html { height: unset; } mi codigo resultante cabe aclarar que con "auto" tambien tambien se soluciona el problema, muchas gracias amigos por compartir su conocimiento Commented el 6 nov. 2020 a las 21:31

2 respuestas 2

0

lo que yo veo es que debes aplicar un estilo llamado overflow-y: auto o un overflow-y: scroll para obligar que en el elemento de la impresión aparezca un scroll que puedas utilizar, igual aquí te dejo un link de w3school para que mires las propiedades que mejor se adapten a tu proyecto : https://www.w3schools.com/cssref/css3_pr_overflow-y.asp espero haberte ayudado

4
  • Buen aporte, igual yo potaría por fuentes con mejor recibimiento en la comunidad como: developer.mozilla.org/es/docs/Web/CSS/overflow-y
    – user128299
    Commented el 6 nov. 2020 a las 19:14
  • también, es muy buena Commented el 6 nov. 2020 a las 19:15
  • muchas gracias amigos, revisare lo que me comentan pues quiza me gustaria mejorar mi codigo, de momento lo solucione con poner el soguiente codigo @media print { html { height: unset; } que es el codigo que comentaba nuestro amigo Alo Malbarez Commented el 6 nov. 2020 a las 21:29
  • vale amigo sí tienes otra duda nos comentas Commented el 7 nov. 2020 a las 16:17
0

La respuesta al problema fue al siguiente

@media print {
  html {
    height: unset;
  }

El valor height puede variar a auto y sigue funcionando correctamente muchas gracias a los compañeros que respondieron

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.