Buenas, tengo la siguiente pregunta, ¿Cómo ubicar mi footer dentro de @media print?
Tengo lo siguiente en mi archivo de css, con el fin de ubicar mi footer en forma de imagen, la idea es que el footer salga en todas las páginas que se vayan a imprimir, la razón por la que estoy enviando una imagen como content
es porque anteriormente tenia varios elementos html que estaba haciendo de footer con el atributo css de fixed
el cual hacia lo que necesitaba, el problema es que como el contenido de la pagina es dinámica, entonces en ocaciones se encimaba el contenido con el footer, ahora, el footer es estático, por lo que le tomé una captura y quiero usarlo como imagen (en sí, el footer contiene una imagen). El problema es que la imagen que tomé no se logra acomodar al tamaño de la pagina, por mucho que cambie el width
u otros atributos, dejaré el html de lo que le tomé captura por si aun existe alguna forma de hacerlo solo con html.
css
@page:first {
size: letter portrait;
margin-top: -65px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
@page {
size: letter portrait;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
@page:right {
@bottom-left {
content: url("http://localhost:8000/static/img/footer.png");
width: 50%;
height: 100%;
}
}
html (opcional)
<footer id="footer">
<div class="toprint">
<div class="row">
<p class="text-center base-text"><strong>FIN DEL INFORME</strong></p>
<p class="text-justify base-text">El resultado emitido corresponde únicamente al obtenido por el análisis de la(s) muestra(s) llegada(s) para estudio, identificada(s) como se especifica en el contenedor de la(s) misma(s) y la solicitud de servicio respectiva.</p>
<p class="text-center base-text">ESTE DOCUMENTO TIENE PROHIBIDA SU REPRODUCCION POR CUALQUIER MEDIO/p>
</div>
</div>
<div class="row panel-footer">
<div class="text-center">
<img id="img-footer"src="{{dominio}}/static/img/logo_gobernacion.png">
</div>
</div>
</footer>
<div class="text-center">
revisa que este div no tenga margenes ni pading, y si los tiene quitaselos o cambia por un css que sobre escriba estos.