1

que tal? quiero implementar un sticky footer utilizando reactjs y no estoy entendiendo la razón de por no funciona.

Necesito un footer que se quede pegado abajo en caso de que la página tenga poco contenido, pero que al mismo tiempo de haber mas contenido no aparezca hasta que se llegue al fondo de la misma en vez de quedar anclado y a la vista todo el rato.

El siguiente código CSS funciona con y sin react

footer{
       position: fixed ;
       bottom: 0 ;
       width: 100vw ;
}

Pero claro, el footer va a estar a la vista tengas poco o mucho contenido.

Y el siguiente código si posiciona el footer en el fondo en caso de haber poco contenido, pero no lo muestra hasta llegar al fondo en caso de que haya mucho contenido. Pero aunque esto si funciona con el html y css de toda la vida por alguna razón no logro comprender porque no funciona en react.

body {
  display: flex ;
  flex-direction: column ;
  min-height: 100vh ;
}
.algún div  etc con contenido {
  flex-grow:  1 ;
}
footer {
  min-height: 18vh;
}

Bueno, si alguien sabe como puedo resolver este problema voy a estar muy agradecido, gracias :3

1 respuesta 1

1

De entrada, esto no tiene que ver con Javascript y, mucho menos, con react, solo involucra CSS.

Creo que flex no es la opción, y menos, la posición fixed, porque queda fijo en la posición de la pantalla y no en el contenedor.

Lo más común, es asignar medida mínima al contenedor y posición relativa, para que elementos internos puedan tener posición absoluta, que es la que se va a asignar al pie de página.

body {
  /* Para poder fijar el pie de página con posición absoluta */
  position: relative;
  /* Medida mínima */
  min-height: 100vh;
}

footer {
  /* Posicionar abajo */
  position: absolute;
  bottom: 0;
  /* Ocupar todo el ancho disponible */
  width: 100%;
  min-height: 18vh;
  /* Solo para probar cómo se ve */
  background: #ccc;
}
<p>Contenido de la página, no es necesario asignar medidas para empujar el pie de página.</p>
<footer>Pie de página</footer>

Seguramente vas a tener que adaptar márgenes internos (padding) y externos (margin) del cuerpo para evitar la barra de desplazamiento vertical cuando hay poco contenido y, tal vez, experimentar con la propiedad box-sizing.

1
  • Tenes razón, no tiene nada que ver con JS, ya corregí eso. ahí pude resolver el asunto, gracias :) Commented el 13 jul. 2021 a las 3:18

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.