0

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>
1
  • Posiblemente sea por los css del <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.
    – eezzekl
    Commented el 13 ene. 2017 a las 18:19

1 respuesta 1

4

No estoy seguro que estés usando el método adecuado. En la definición de MDN dicen esto

La regla @page es usada para modificar algunas propiedades CSS cuando imprimes el documento. No puedes cambiar todas las propiedades CSS con @page. Solo puedes cambiar margenes, lineas huerfanas, ventanas y quiebres de página para el document. Si intentas cambiar cualquier otra propiedad CSS será ignorada


Yendo a la solución yo intentaría utilizar la media query para dispositivos print. Algo así:

@media print {
  .footerConImagen { position:absolute;bottom:0px }
}

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.