2

estoy realizando un proyecto y en la página index logré posicionar el footer al fondo de la página, pero al cambiar el tamaño de la ventana (minimizar tamaño) veo que la pag hace scroll y el footer no queda en el fondo sino que queda como si tuviera el valor position: sticky. en el ejemplo pueden ver sin poner en pantalla completa.

no se me ocurre alguna manera de solucionar esto, espero y puedan ayudarme.

body {
    background: linear-gradient( 90deg, green, #ffb744 );
    color: white;
    font-weight: 700;
    margin: 0;
}

.site-footer {
    position: absolute;
    background-color: white;
    border-top: 3px solid black;
    bottom: 0;
    color: #099700;
    padding: 20px 0;
    width: 100%;
  text-align: center;
}

.container {
  height: 300px;
  width: 50%;
  margin: 0 auto;
  background-color: white;
  border: 2px solid black;
  text-align: center;
  color: black;
 }
<body>
  
  <div class="container">
    cualquier texto
  </div>
  
  <footer class="site-footer">
      aqui va el copyright
  </footer>
</body>

2
  • Con position absolute, el bottom: 0 significa pegado al actual fondo de la pantalla. Obviamente si el contenido sigue para abajo, como tienes position: absolute el "footer" se queda en donde estaba en el momento que se dibujó. Si lo que quieres es que vaya al fondo "de todo", prueba a ponerle un position: relative; y verás como se coloca al final del div.container.
    – Benito-B
    el 2 oct. 2022 a las 20:18
  • el problema benito es que al usar position: relative queda un pequeño espacio entre el footer y el fondo de la pag. no he dado como solucionar eso, por eso opté por usar position: absolute, ya que con el no queda espacio pero al hacer scroll genera el problema de mi pregunta. he intentado ponerle height: 100% al body y html pero nada
    – Marcus
    el 3 oct. 2022 a las 18:55

2 respuestas 2

0

Solo bastaría cambiar la posición de tu clase .site-footer. en tu código lo tienes así:

.site-footer {
    position: absolute;
    background-color: white;
    border-top: 3px solid black;
    bottom: 0;
    color: #099700;
    padding: 20px 0;
    width: 100%;
  text-align: center;
}

De la cual, deberías cambiarlo por position: relative; para que el footer se coloque al final del contenedor de encima:

.site-footer {
    position: relative; /* aquí el cambio */
    background-color: white;
    border-top: 3px solid black;
    bottom: 0;
    color: #099700;
    padding: 20px 0;
    width: 100%;
  text-align: center;
}

El resultado sería así:

body {
    background: linear-gradient(90deg, green, #ffb744);
    color: white;
    font-weight: 700;
    margin: 0;
}

.site-footer {
    position: relative;
    background-color: white;
    border-top: 3px solid black;
    bottom: 0;
    color: #099700;
    padding: 20px 0;
    width: 100%;
    text-align: center;
}

.container {
    height: 500px; /* Le aumentamos el height para ver el cambio */
    width: 50%;
    margin: 0 auto;
    background-color: white;
    border: 2px solid black;
    text-align: center;
    color: black;
}
<body>
    <div class="container">
        cualquier texto
    </div>

    <footer class="site-footer">
        aqui va el copyright
    </footer>
</body>

6
  • 1
    gracias por tu ayuda. el problema de usar position: relative es que entre el footer y el final de la pag queda un espaciado. le he puesto height 100% al body y al html pero no queda totalmente al fondo
    – Marcus
    el 3 oct. 2022 a las 18:20
  • Yo no veo ningún espacio, el footer se irá totalmente al final de la página así agregues contenido encima. Puedes agregarle margin: 0 para quitar los espacios que mencionas el 3 oct. 2022 a las 19:02
  • sí, hay algo en el código que me da ese problema pero no logro dar con el... seguiré intentando
    – Marcus
    el 3 oct. 2022 a las 19:34
  • Ok está bien, nos avisas el 3 oct. 2022 a las 19:35
  • 1
    ya encontré solución! utilizando display: grid. puse los siguientes valores a <body> display: grid; | grid-template-rows: auto 1fr auto; | min-height: 100vh; y a .site-footer margin-top: auto; eliminando bottom: 0; y position: absolute;
    – Marcus
    el 4 oct. 2022 a las 5:53
0

Prueba lo siguiente:

  • Agregar altura minima (min-height) de 100vh al body.
  • Cambiar el valor de la altura del elemento .container de 300px a auto

UPDATE 1

Agrega:

  • position: relative al body
  • position: absolute al footer

body {
  background: linear-gradient( 90deg, green, #ffb744 );
  color: white;
  font-weight: 700;
  margin: 0;
  min-height: 100vh;
  position: relative
}

.site-footer {
  position: absolute;
  background-color: white;
  border-top: 3px solid black;
  bottom: 0;
  color: #099700;
  padding: 20px 0;
  width: 100%;
  text-align: center;
}

.container {
  height: 600px;
  width: 50%;
  margin: 0 auto;
  background-color: white;
  border: 2px solid black;
  text-align: center;
  color: black;
}
<body>

  <!-- Add your site or application content here -->
  <div class="container">
    cualquier texto
  </div>

  <footer class="site-footer">
    aqui va el copyright
  </footer>
</body>

6
  • sigue con el mismo problema. sale el scroll de la pag y sigue como sticky
    – Marcus
    el 3 oct. 2022 a las 18:24
  • Revisa el update a ver si te funciona
    – GmrYael
    el 3 oct. 2022 a las 19:35
  • sube más el footer. hay algo de materialize que me produce el problema pero no doy con él
    – Marcus
    el 4 oct. 2022 a las 5:03
  • No comprendo tu comentario @Marcus, que yo suba mas el footer? o que el footer subio mas al utilizar la solucion que te di?. Si es algo de materialize, debes copiar todo el codigo amigo para ver la verdera problematica.
    – GmrYael
    el 4 oct. 2022 a las 15:57
  • Si el problema es de materialize te exorto a que modifiques la pregunta para ver el codigo o que crees una pregunta nueva y etiquetes de manera correcta (materialize)!
    – GmrYael
    el 4 oct. 2022 a las 16:01

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.