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

Why use this instead of the standard Discourse footer theme component?

1 Mi Piace
3

You tell me Jeff :slight_smile: …do we need to install components for every extra HTML and CSS code?
This is not a “how to create a footer” tutorial but more like a quick alternative solution to make a footer stick to the bottom of the page for those who may want to create their own footer.

4

Hmm, my thinking is we want people to use the theme components whenever possible as they are “official” from us and thus get full support, get auto updated, etc. What do @awesomerobot @Johani and @jordan.vidrine think?

2 Mi Piace
7

Yeah if the official footer component fits your needs then it’s nice because we keep it up-to-date for you, but some people will want a different layout.

I’ve done something like this in the past… it’s a similar process to OP. You set the #main-outlet height to be 100% of the viewport height (100vh) minus the height of the footer and header. So on short pages your footer will now sit right at the bottom.

#main-outlet {
  box-sizing: border-box; // includes padding in height calculation
}

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  My footer content
</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

It comes up often enough that it’s probably worth doing something like this in core automatically if there’s content in footer.html or either of the two footer plugin outlets.

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