1

Estoy usando Bootstrap 3.3.7. Un mal uso del CSS ocasiona problemas en ciertas páginas al hacer scroll-down, tal como a continuación.

Página de inicio: introducir la descripción de la imagen aquí

Ningun problema con el pie de página, ahora vayamos a la zona de administradores:

introducir la descripción de la imagen aquí

Aquí se puede reproducir el error.

Por más que intento, no hay solución. He buscado todo tipo de footers y códigos de CSS; el problema persiste.

Codigo Utilizado/Actual/Fallido:

 <style>
 footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
 }
 </style>
 <footer>
  <small class="text-muted"><a href="{{ route('terms') }}">Terms</a> • <a href="{{ route('privacy') }}">Privacy</a> • <a href="{{ route('status') }}">Status</a></small>
 </footer>

RESULTADO ESPERADO: El pie de página debiese colocarse siempre al final de la página. En el caso 1, la página no puede hacerse scroll-down la segunda es reproducible.

3
  • estas agregando mas contenido abajo del footer?
    – Alvarez
    Commented el 10 sept. 2017 a las 1:09
  • @Luis Fernando No... Commented el 10 sept. 2017 a las 1:09
  • ¿Podrías agregar el código de la segunda página para que podamos reproducir el error? Commented el 10 sept. 2017 a las 15:16

2 respuestas 2

4

En el estilo de la clase footer, en vez de utilizar absolute

position: absolute;

utiliza fixed

position: fixed;
0

Te recomiendo usar position: fixed y width 100%; con bottom: 0 tranquilamente puedes fijarlo en la parte inferior.

Tu código quedaría de la siguiente forma:

footer {
 position: fixed;
 width: 100%;
 bottom: 0;
 padding: 1rem;
 background-color: #efefef;
 text-align: center;
}
2
  • 1
    Hola Yerson. Procura esxplicar mejor la respuesta. Lee Cómo responder para mejorarla. Un saludo
    – lois6b
    Commented el 11 sept. 2017 a las 7:11
  • Gracias por el feedback. Asi lo haré :)
    – Yerson
    Commented el 11 sept. 2017 a las 14:51

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.