Cómo crear un pie de página receptivo usando css

Mantener el pie de página en la parte inferior de la página es un requisito de diseño web común. Sin embargo, algunos usuarios encuentran dificultades para usar la propiedad de posicionamiento "absoluto". Este artículo lo guiará a través de la implementación correcta de CSS para lograr un efecto de pie de página adhesivo sin interrumpir su diseño.

emisión de fondo

usuarios que intentan arreglar su posición de pie de página sin éxito han aplicado típicamente el siguiente código:

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

Solución propuesta

para resolver el problema sin usar complementos o elementos HTML adicionales, siga estos pasos:

1. agregue las siguientes reglas CSS a su stylesheet:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Asegúrese de que la altura especificada en "cuerpo {margin}" coincida con la altura real del elemento de pie de página (por ejemplo estilo.