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
    el 10 sep. 2017 a las 1:09
  • @Luis Fernando No... el 10 sep. 2017 a las 1:09
  • ¿Podrías agregar el código de la segunda página para que podamos reproducir el error? el 10 sep. 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
    el 11 sep. 2017 a las 7:11
  • Gracias por el feedback. Asi lo haré :)
    – Yerson
    el 11 sep. 2017 a las 14:51

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.