Footer fisso in basso, soluzione in puro CSS

Contribuisci UX
1

Ciao appassionati di Discourse,

Voglio condividere con voi la mia soluzione per un footer fisso, senza bisogno di JavaScript (un’alternativa a questa richiesta), assumendo che conosciate l’altezza del vostro footer. Ho aggiunto 100px in più al mio per avere uno spazio tra il contenuto e il footer.
Nel caso abbiate un footer più grande con più colonne, dovreste impostare un’altezza fissa diversa nella scheda mobile.

Passo 1: Incolla questo nella scheda CSS comune

body {
  position: relative;
}

#main {
  margin-bottom: 350px; /* corrisponde all'altezza del footer: modificalo secondo le tue esigenze, sia nella scheda comune che in quella mobile */
}

#sticky-footer {
  padding: 50px 0;
  background: var(--header_background);  /* opzionale */
  color: var(--primary-medium); /* opzionale */
  text-align: center; /* opzionale */
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

Passo 2: Vai alla scheda </body> e incolla il tuo HTML del footer all’interno

Esempio:

<div id="sticky-footer">
  <div class="wrap">
      <!-- il contenuto del tuo footer qui -->
  </div>
</div>

È tutto :slightly_smiling_face:. Ora il tuo footer rimarrà fissato in fondo alla pagina, anche su pagine con contenuto breve.

Ecco come appare il nostro footer su una pagina con contenuto breve:

image
image1150×1082 28.9 KB

In caso contrario, verrebbe posizionato a metà schermo, come in questo caso:

image
image1316×1222 33.5 KB

3 Mi Piace
2

Perché usare questo invece del componente standard del tema Discourse per il piè di pagina?

1 Mi Piace
3

Me lo dici tu, Jeff :slight_smile: …dobbiamo installare componenti per ogni codice HTML e CSS aggiuntivo? Questo non è un tutorial su “come creare un footer”, ma piuttosto una soluzione alternativa rapida per fissare un footer in fondo alla pagina per chi volesse crearne uno proprio.

4

Hmm, la mia idea è che vogliamo incoraggiare le persone a utilizzare i componenti del tema ogni volta che è possibile, dato che sono “ufficiali” da parte nostra e quindi ricevono pieno supporto, aggiornamenti automatici, ecc. Cosa ne pensano @awesomerobot, @Johani e @jordan.vidrine?

2 Mi Piace
7

Sì, se il componente footer ufficiale soddisfa le tue esigenze, è comodo perché lo manteniamo aggiornato per te, ma alcune persone potrebbero volere un layout diverso.

Ho fatto qualcosa di simile in passato… è un processo simile a quello descritto dall’OP. Imposti l’altezza di #main-outlet pari al 100% dell’altezza della finestra di visualizzazione (100vh) meno l’altezza di footer e header. Quindi, nelle pagine più brevi, il footer si posizionerà automaticamente in fondo.

#main-outlet {
  box-sizing: border-box; // include il padding nel calcolo dell'altezza
}

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  Contenuto del mio footer
</script>

<script type="text/discourse-plugin" version="0.8">
    api.decoratePluginOutlet(
      "below-footer",
      (elem, args) => {
          let headerHeight = document.querySelector(".d-header").offsetHeight;
          let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
          let mainOffset = headerHeight + footerHeight;
          
          document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
      }
   );
</script>

Screen Shot 2021-02-22 at 6.19.39 PM
Screen Shot 2021-02-22 at 6.19.39 PM878×787 118 KB

Questo problema si presenta abbastanza spesso, quindi probabilmente varrebbe la pena implementare automaticamente qualcosa di simile nel core se è presente contenuto in footer.html o in uno dei due outlet plugin del footer.

4 Mi Piace
8

@cosdesign, dove si trova quella scheda CSS se non ti dispiace chiedertelo amico :slight_smile:

9

Per il tuo tema predefinito lo troveresti andando nel pulsante Modifica CSS/HTML:

Untitled
Untitled1482×751 43.1 KB

Anche se sarebbe meglio crearlo come componente del tema invece. (fai clic sul pulsante Installa e seleziona ‘crea nuovo’ da lì)

Ci sono maggiori informazioni su Developing Discourse Themes & Theme Components :+1:

2 Mi Piace
10

Fantastico :slight_smile:

1 Mi Piace