Impossibile far funzionare il piè di pagina CSS Sticky. Che cosa sto facendo di sbagliato?

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

  •  03-07-2019
  •  | 
  •  

Domanda

Bene, questo è il mio primo post qui e mi sto davvero godendo il sito.

Ho un sito molto semplice (brutto come il peccato) che ho avviato e per qualche motivo, non riesco a far funzionare il footer Sticky CSS per FireFox. IE funziona ma FF lo mostra a metà pagina.

L'URL è http://dev.aipoker.co.uk

So che dovrei sviluppare in FF e correggere errori in IE, quindi immagino che avrei potuto effettivamente fare un errore e in qualche modo funziona in IE ma da nessun'altra parte.

Qualcuno può aiutarmi a liberarmi della mia miseria, per favore?

Grazie, ragazzi e ragazze.

È stato utile?

Soluzione

Prova questo uno , funziona bene su Firefox.

A proposito, dovresti ascoltare il podcast di Boagworld se non l'hai già fatto. È brillante! :)

Saluti.

Altri suggerimenti

Ho avuto successo con codice come questo: 

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

Le modifiche minime che posso vedere per fare questo sarebbero:

  • sposta piè di pagina Sezione all'interno del corpo
  • imposta la posizione assoluta su body e footerSection
  • set bottom = 0px su footerSection

che finisce con qualcosa del genere nella tua testa: 

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

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

Questo è tutto ciò che devi sapere su css solo piè di pagina e amp; navy appiccicosi:

Attenersi alla fine della pagina 

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

Attenersi alla parte inferiore dello schermo 

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

Eventuali problemi ed è probabilmente dovuto alla posizione in cui hai inserito il codice html (non trasformare il piè di pagina in un elemento figlio a meno che non si attenga al wrapper di contenuto) o CSS sovrapposto.

Puoi applicare la stessa tecnica alla navigazione adesiva capovolgendo l'auto & amp; superiore. È compatibile con più browser (dalla memoria di IE7 e successive) inclusi i cellulari.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top