Pie de página Html al final de la página
Pie de página pegajosoHaga clic en el botón de abajo para ocultar el contenido de esta página. Observe cómo el pie de página se adhiere a la parte inferior de la ventana incluso cuando no hay suficiente contenido para llenar la página. Alternar contenidosConseguir que el pie de página se adhiera a la parte inferior de las páginas con poco contenido es algo que casi todos los desarrolladores web han intentado hacer en algún momento de su carrera. Y, en su mayor parte, es un problema resuelto. Sin embargo, todas las soluciones existentes tienen un defecto significativo – no funcionan si la altura de su pie de página es desconocida.Flexbox es un ajuste perfecto para este tipo de problema. Aunque es conocido sobre todo por la disposición del contenido en dirección horizontal, Flexbox funciona igualmente bien para los problemas de disposición vertical. Todo lo que tienes que hacer es envolver las secciones verticales en un contenedor flexible y elegir cuáles quieres expandir. En el ejemplo siguiente, el contenedor se ajusta a la altura de la ventana y el área de contenido se expande según sea necesario. (Nota: en la dirección vertical es necesario especificar una altura para el contenedor. Esto es diferente de la dirección horizontal, que se expande automáticamente para encajar). El HTML<body class=»Site»>
El pie de página no se pega al fondo
Pies de página pegajososUn pie de página pegajoso es aquel en el que el pie de tu página se «pega» a la parte inferior de la ventana gráfica en los casos en los que el contenido es más corto que la altura de la ventana gráfica. Veremos un par de técnicas para crear uno en esta receta.
Nota: En este ejemplo y en el siguiente utilizamos un wrapper configurado en min-height: 100% para que nuestro ejemplo en vivo funcione. También puede lograr esto para una página completa mediante el establecimiento de un min-altura de 100vh en el <body> y luego usarlo como su contenedor de rejilla.
Elecciones realizadasEn el ejemplo anterior logramos el pie de página pegajoso utilizando CSS Grid Layout. El .wrapper tiene una altura mínima del 100%, lo que significa que es tan alto como el contenedor en el que se encuentra. A continuación, creamos un diseño de cuadrícula de una sola columna con tres filas, una fila para cada parte de nuestro diseño.
La autocolocación de la rejilla colocará nuestros elementos en orden de origen y así la cabecera va en la primera pista de tamaño automático, el contenido principal en la pista 1fr y el pie de página en la pista final de tamaño automático. La pista 1fr ocupará todo el espacio disponible y por lo tanto crece para llenar el vacío.Método alternativoSi necesita compatibilidad con los navegadores que no soportan Grid Layout también puede utilizar Flexbox para crear un pie de página pegajoso.
Hacer que el pie de página se pegue al fondo css
Tener un pie de página en la parte inferior de tu página HTML puede ser muy útil. Tradicionalmente, forzar el pie de página hacia abajo era una tarea bastante difícil si el contenido de la página no llenaba toda la altura del navegador. Pero hoy en día el uso de flexbox y algo de auto-margen puede salvar el día.
Cuando se diseña una página HTML a menudo se quiere añadir un pie de página con alguna información adicional pero secundaria. Lógicamente, el pie de página debería estar en la parte inferior de la página. Uno podría simplemente añadir el marcado de pie de página como la última pieza en el documento y llamarlo un día. Eso funcionaría, en la mayoría de los casos. Pero, ¿qué ocurre cuando el contenido de la página no ocupa toda la altura de la pantalla de los usuarios? Bueno, el pie de página se renderizará directamente después del contenido y colgará en algún lugar en el medio de la pantalla. Eso no es lo que queríamos. Por suerte, flexbox puede salvar el día aquí, ¡sin depender de oscuros hacks!
Eso es todo, el pie de página estará en la parte inferior de las páginas, incluso con contenido pequeño. Tenga en cuenta que cuando el contenido se hace más grande que la pantalla de los usuarios, el pie de página fluirá normalmente en la parte inferior de sus páginas también, no hay trabajo extra allí.
Css alinear el pie de página a la parte inferior
<div id=»pie de página»>Pie de página aquí.</div> Ahora que tienes tu HTML básico configurado, vamos a ir al CSS y ver lo que tenemos que hacer allí para que funcione. En primer lugar, queremos dar a las etiquetas html y body una altura del 100%: html, body {
} A continuación, tenemos que establecer el div contenedor a position:relative, min-height: 100% y margen negativo la parte inferior la altura del pie de página. ¿Qué? ¿Un pie de página de altura fija, dices? Sí, no he encontrado la mejor manera de hacerlo de otra manera: #container {
} ¿Qué es eso? Sí, sé que todavía no funciona. Todavía hay que hacer un poco de magia. Resulta que necesitamos un div para ayudar a separar el pie de página del contenedor. Vamos a llamarlo clearfooter. Así que vuelve a tu HTML y añade la clase div justo dentro del div de cierre del contenedor. Esto es muy importante. Dentro del div de cierre: <div id=»contenedor»>
} Muy bien. Así que para los que usamos navegadores que no son estúpidos, esto debería funcionar bien. Pero el 80% de los que usan ese navegador que es estúpido, nuestro amigo Internet Explorer 6. Afortunadamente, es una solución bastante sencilla. Lo sé, ¿con qué frecuencia ocurre eso? En primer lugar, debes saber que IE7 debería funcionar bien con lo que hemos hecho hasta ahora. Así que todo lo que necesitamos es un «hack» específico para IE6. En tu cabecera donde estás llamando a tu hoja de estilos externa pon esto: <!-[si es IE 7]>