Durante la creazione di un sito internet ci sarà sicuramente capitato il problema del posizionamento del footer. Specialmente nelle pagine in cui il contenuto non è sufficiente a spingere il footer in basso, alla base della schermata del browser, è necessario intervenire con delle regole css per evitare che il footer rimanga sospeso in mezzo alla pagina.

Problema: Footer sospeso in mezzo alla pagina

footer-sospeso

Vediamo una struttura semplificata di una pagina html in cui possiamo riconoscere due blocchi principali, il div con id = wrap, con il contenuto della pagina web, e il div con id = footer.

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="stile.css">
  </head>

  <body>
    <div id="wrap">
      <h1>Posizionare il footer in basso</h1>

    </div>

    <div id="footer">
      Footer incollato in basso

    </div>

  </body>
</html>

Prima di tutto è necessario assegnare l’altezza dei tag html e body al 100%.
Questi elementi devono avere il margine impostato a 0.

Il contenitore wrap deve avere l’altezza minima al 100% e un margine negativo verticale che corrisponde all’altezza del footer.

Il footer ha un’altezza fissa specificata in pixel.

html,
body
{
   height: 100%;
}

h1, body
{
   margin: 0
}

#wrap
{
  height: auto !important;
  min-height: 100%;
  position: relative;
  margin: 0 auto -60px;
}

#footer
{
  height: 60px;
}

/*** regole non necessarie ***/

#footer
{
  background-color: #f5f5f5;
  width: 900px;
  margin: 0 auto;
  text-align: center;
}  

h1
{
  text-align: center;
}

Risultato: Footer fisso a fondo pagina

Nell’immagine possiamo vedere che il footer rimane incollato a fondo pagina. Questo comportamento segue il ridimensionamento della finestra del browser.

posizionamento-footer-in-basso


  inStileWeb.com
blog comments powered by Disqus