¿Por qué mi pie de página está en el medio de mi página web?

Un pie de página web puede aparecer en el medio de la página web y no en la parte inferior por varias razones. Uno de los más comunes es que el contenido del sitio web es pequeño y el pie de página se desplaza al medio. Los "" contenedores con el pie de página pueden estar codificados incorrectamente, los márgenes o el relleno pueden ser incorrectos y la propiedad "float" puede ser incorrecta.

Posición del pie de página

La propiedad "posición" de CSS del pie de página determina dónde se coloca el pie de página en la página web en relación con los otros elementos de la página, como el encabezado y el contenido del cuerpo principal. Los cinco tipos de posicionamiento son: posición estática, posición fija, posición relativa, posición superpuesta y posición absoluta. La posición absoluta en el pie de página se utiliza para que el elemento de pie de página no se comporte en relación con los otros elementos. Agregue la "posición: absoluta;" codificación dentro del corchete "# footer" "{" y "}" etiquetas. Además, agregue "abajo: 0;" en la línea directamente debajo de la codificación de "posición". Ahora el pie de página está posicionado absolutamente en la parte inferior del contenedor de la página web "DIV".

Ancho y altura de pie de página

Las propiedades de ancho y altura del pie de página pueden estar interfiriendo con la posición del pie de página. Si el pie de página es demasiado grande, ocupa demasiado espacio en la parte inferior de la página web. Dentro de las etiquetas de corchetes "#footer" de "{" y "}" se enumeran los "anchos: Xpx;" y "altura: Xpx;" codificación. Cambie el ancho a "100%" para que el pie de página sea tan ancho como el resto del contenido del sitio web. Cambie la altura al tamaño de píxel deseado, como "60px" o "75px". Estos dos cambios pueden contribuir a que el pie de página se desplace hacia la parte inferior de la página web.

Márgenes y relleno

La codificación de márgenes y relleno puede interferir con la posición del pie de página. Cuando los márgenes del pie de página son demasiado estrechos o el relleno es demasiado ancho, la posición del pie de página se desplaza y puede moverse a la mitad de la página web. Una solución fácil es eliminar los márgenes y el relleno por completo, de modo que las propiedades del pie de página se correspondan con el resto de la codificación. Localice la propiedad "#footer" en la codificación de la página web. Dentro de las etiquetas de corchete de "{" y "}" se encuentran el "margen: Xpx Xpx Xpx Xpx;" y "relleno: Xpx Xpx Xpx Xpx;" codificación. Ahora los márgenes del pie de página y el relleno están determinados por las etiquetas "#body" y "#container" en la parte superior de la página web. Elimine ambas líneas de codificación y actualice la página web.

El diseño del contenedor

Un pie de página web es un elemento que se coloca dentro del diseño general del contenedor DIV. Cuando las propiedades de diseño del contenedor son incorrectas, puede afectar la posición del pie de página dentro de la página web. Dentro de las etiquetas de corchetes "#contenedor" de "{" y "}" se encuentran las mismas propiedades de "altura" y "posición". Cambie la "altura" al 100% y cambie la "posición" a relativa. Agregue una nueva línea de codificación al "#contenedor" y escriba "min-height: 100%;", que le da a todo el diseño del contenedor una nueva altura mínima. Ahora, toda la página web permanecerá a la altura completa de la pantalla, independientemente de la cantidad de contenido. La posición relativa también interactúa positivamente con la posición absoluta del pie de página.