No se puede hacer que el pie de página CSS Sticky funcione. ¿Qué estoy haciendo mal?

StackOverflow https://stackoverflow.com/questions/159487

  •  03-07-2019
  •  | 
  •  

Pregunta

Bueno, esta es mi primera publicación aquí y realmente disfruto del sitio.

Tengo un sitio muy básico (feo como pecado) que he comenzado y, por alguna razón, no puedo hacer que el pie de página CSS Sticky funcione para FireFox. IE funciona pero FF lo muestra a la mitad de la página.

La URL es http://dev.aipoker.co.uk

Sé que debería desarrollarme en FF y corregir errores en IE, así que supongo que podría haber cometido un error y de alguna manera funciona en IE, pero en ningún otro lugar.

¿Alguien puede ayudarme a salir de mi miseria, por favor?

Gracias, chicos y chicas.

¿Fue útil?

Solución

Pruebe esto uno , funciona bien en Firefox.

Por cierto, deberías escuchar el podcast de Boagworld si aún no lo hiciste. ¡Es brillante! :)

Saludos.

Otros consejos

He tenido éxito con un código como este: 

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

Los cambios mínimos que puedo ver para hacer esto serían:

  • mover la sección del pie de página dentro del cuerpo
  • establecer la posición absoluta en el cuerpo y la sección del pie de página
  • set bottom = 0px en footerSection

que termina con algo como esto en tu cabeza: 

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

<div id="body">
   ...
   <div id="footerSection">
      ...
   </div>
</div>

Esto es todo lo que necesita saber sobre css solo pie de página adhesivo & amp; navegación adhesiva:

Pegar al final de la página 

Position: absolute;
top:auto;
bottom: 0;

Pegar en la parte inferior de la pantalla 

Position: fixed;
top:auto;
bottom:0;

Cualquier problema y probablemente se deba a dónde colocó su código html (no convierta el pie de página en un elemento secundario a menos que se adhiera al contenedor de contenido) o se superponga CSS.

Puede aplicar la misma técnica a la navegación fija volteando el auto & amp; parte superior. Es compatible con varios navegadores (desde la memoria de IE7 y superior), incluidos los móviles.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top