▶ Agencia SEO | Posicionamiento web en toda España

pie de página de bootstrap

Cuando estás construyendo una página web, puedes decidir que quieres añadir un pie de página. Por ejemplo, digamos que estás construyendo un sitio para una cafetería local. Puede que quieras añadir un pie de página con el nombre, la información de contacto y el horario de apertura de la cafetería.

Ahí es donde entra en juego la etiqueta HTML <footer>. La etiqueta <footer> se utiliza para crear un pie de página en HTML. Las etiquetas <footer> suelen contener otras etiquetas que ayudan a la navegación, identifican al autor de una página, etc.

En HTML, hay una amplia gama de etiquetas que se utilizan para definir el diseño de una página y sus elementos. Estas etiquetas ayudan a los desarrolladores a simplificar sus páginas web porque hacen más clara la estructura de una página web.

La etiqueta <footer> en HTML define un pie de página para un documento o una sección de una página web. Los pies de página suelen contener el autor de un documento, información de contacto y enlaces importantes. Un pie de página al final de una sección incluirá cualquier información final relacionada con el contenido de esa sección.

Puede utilizar la etiqueta HTML <footer> varias veces en un documento, dependiendo de la estructura de su página. Sin embargo, sólo puede utilizarse en la etiqueta <body>. No se puede colocar una etiqueta <footer> dentro de un <header>, una <address> u otra etiqueta <footer>.

pie de página html css

Si tomas el elemento que quieres que sea el pie de página y le pones position:fixed y bottom:0, cuando la página se imprima repetirá ese elemento en la parte inferior de cada página impresa. Lo mismo funcionaría para un elemento de cabecera, sólo hay que poner top:0 en su lugar.

Acabo de pasar la mitad de mi día para llegar a una solución que realmente funcionó para mí y pensé que iba a compartir lo que hice. El problema que tenía con las soluciones anteriores era que todos mis elementos de párrafo se superponían con el pie de página que quería en la parte inferior de la página. Para evitarlo, utilicé el siguiente CSS:

El page-break-inside para p y content-block fue crucial para mí. Cada vez que una p sigue a una h*, las envuelvo en un div class = “content-block”> para asegurarme de que permanezcan juntas y no se rompan.

Por una petición en los comentarios, estoy añadiendo un documento HTML de ejemplo. Deberás copiarlo en un archivo HTML, abrirlo y luego elegir imprimir la página. La vista previa de impresión debería mostrar que esto funciona. En mi caso, funcionó en Firefox e IE, pero Chrome hizo que la fuente fuera lo suficientemente pequeña como para caber en una página, por lo que no funcionó allí.

html pie de página en el cuerpo

Cuando estás construyendo una página web, puedes decidir que quieres añadir un pie de página. Por ejemplo, digamos que estás construyendo un sitio para una cafetería local. Es posible que quieras añadir un pie de página con el nombre, la información de contacto y el horario de apertura de la cafetería.

pie de página de w3schools

Este método utiliza un “truco” colocando un pseudo-elemento ::after en el cuerpo, y configurándolo para que tenga la altura exacta del pie de página, de modo que ocupe exactamente el mismo espacio que el pie de página, de modo que cuando el pie de página se posicione de forma absoluta sobre él, parezca que el pie de página está realmente ocupando espacio y se eliminen los efectos negativos de su posicionamiento absoluto (por ejemplo, pasar por encima del contenido del cuerpo)

Esa es la única modificación que tienes que hacer en el HTML, añadir ese div con la clase “allButFooter”. Lo hice con todas las páginas, las que eran tan cortas que sabía que el pie de página no se pegaría al fondo, y también las páginas lo suficientemente largas como para saber que tenía que hacer scroll. Hice esto, para poder ver que funciona bien en el caso de que el contenido de una página sea dinámico.

Eso es todo lo que hice, y me funcionó perfectamente. No lo he probado en todos los navegadores, sólo en Firefox, Chrome y Edge, y los resultados fueron los que quería. El pie de página se pega a la parte inferior, y no hay que meterse con el z-index, la posición o cualquier otra propiedad. La posición de cada elemento de mi documento era la posición por defecto, no la cambié a absoluta ni fija ni nada.