Realizzare layout al 100% di altezza con i css

Molto spesso capita di dover realizzare layout fluidi, che a causa del molto contenuto debbano adattarsi in larghezza alle dimensioni del browser. In un precedente articolo abbiamo visto quanto sia semplice realizzare layout fluidi con una buona compatibilità tra browser.

Obbiettivo più complesso è invece realizzare un layout con altezza che si adatti al browser. Questa operazione sicuramente non troppo comune ha il pregio (e soprattutto il difetto) di limitare il contenuto nell’altezza della finestra del browser.

Diventa quindi una scelta poco consigliata per garatire l’accessibilità dei contenuto, tuttavia può tornare utile per specifiche richieste che richiedono di emulare un full screen tipico dei siti in flash.

Per raggiungere in nostro obbiettivo è indispensabile far sì che il div contenitore della pagina mantenga un’altezza pari all’altezza della finestra del browser.

Cosa non fattibile settando semplicemente l’altezza dell’elemento al 100%, ma richiede che l’elemento genitore abbia settata un’altezza e che l’elemento in questione abbia un posizionamento assoluto.

body{
margin:0;
padding:0;
height:100%;
}

#content{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
overflow:hidden;
}

Grazie a questi parametri l’elemento si estende su tutta l’altezza della pagina rimanendo fuori dal flusso tradizionale con un posizionamento assoluto. Vedi l’esempio.

Per aggiungere un footer al nostro layout sarà sufficiente ridurre l’altezza dell’elemento precedente di pari valore all’altezza del footer ricordando di settare un posizionamento assoluto con bottom uguale a 0.

#footer{
height:10%;
width:100%;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}

In questo modo il footer rimarrà attaccato al fondo della finestra del browser anche al resize da parte dell’utente. Vedi esempio.

Come ultimo esempio vediamo come rendere centrato e a larghezza fissa il nostro layout.

Iniziamo settando delle larghezze a larghezza fissa mentre per centrare gli elementi non utilizziamo i margini laterali settati su auto bensì la proprietà left:50% in aggiunta ad un margine sinistro negativo pari alla metà della larghezza dell’elemento.

#content{
height:90%;
width:960px;
position:absolute;
top:0;
left:50%;
margin-left:-480px;
overflow:hidden;
}

#footer{
height:10%;
width:960px;
position:absolute;
bottom:0;
left:50%;
margin-left:-480px;
overflow:hidden;
}

In questo modo otteniamo un layout a larghezza fissa centrato con altezza al 100% e footer adiacente al margine inferiore della finestra del browser. Vedi l’esempio.

Note:

Questa soluzione non è consigliata per siti complessi in quanto il posizionamente assoluto rende maggiormente complessa l’impaginazione dei contenuti e come detto all’inizio mette a repentaglio l’accessibilità dei contenuti a risoluzioni ridotte.

La proprietà overflow:hidden; è stata inserita negli elementi per evitare che al ridimensionamento della finestra del browser l’altezza del contenuto comprometta il layout ma non è indispensabile per rendere l’altezza fluida.

Per far sì che il footer della pagina sia sempre adiacente al margine inferiore della pagina è possibile utilizzare solo il posizionamento assoluto con la proprietà bottom:0; senza ricorrere ad altezze in percentuale.

Le altezze in percentuale come le larghezze vengono renderizzate convertendo la dimensione in percentuale dell’elemento in pixel, può quindi accadere di avere uno spazio bianco tra due elementi (come #content e #footer) dato da un arrotondamento approssimativo, per risolvere questo problema è possibile utilizzare il background del body per non rendere visibile questo spazio. Nell’esempio si è settato volontariamente un sfondo bianco per rendere visibile questa problematica.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , . Contrassegna il permalink.

8 risposte a Realizzare layout al 100% di altezza con i css

  1. Giacomo Ratta scrive:

    Bel lavoro! Peccato che non si possa evitare il posizionamento assoluto…

  2. Laura De Masi scrive:

    quando ci sono molti contenuti però la pagina non fa lo scroll e il testo che eccede viene nascosto :-(

  3. Mauro Accornero scrive:

    Già in effetti non è la tecnica più consigliata su un sito web tradizionale (absolute complica l’impaginazione e l’altezza al 100% compromette l’accessibilità dei contenuti). Per il momento mi sembra la miglior soluzione per raggiungere l’altezza del 100% senza utilizzare javascript. Sto lavorando a questa soluzione per un sito di fotografia molto particolare, se riesco a trovare qualche alternativa migliore aggiornerò l’articolo per ora mi sembra il compromesso migliore. Ho anche una soluzione ibrida css e javascript appena trovo il tempo pubblico anche quella.

  4. Gio scrive:

    In compenso è molto comodo per siti che hanno un’altezza fissata minore dell’area minima della maggior parte dei browser (lo so, sono un po’ confusionario: avessi letto questo articolo un annetto fa avrei avuto molta più ispirazione per alcuni lavoretti ;) . E cmq è sempre possibile mettere l’overflow per far scrollare il contenuto all’interno di un container principale.

    Mi piace l’idea di fissare l’elemento da qualche parte senza usare l’attributo fixed che su IE da moltoi problemi: ovvio, i problemi poi sono altri, ma è sempre interessante trovare valide alternative un po’ furbe.

  5. Arquen scrive:

    Di qualche mese fa il post, ma mi sono incuriosito ed ho fatto un pò di prove. Ho risolto in questo modo:

    html,body{background-color:#ffffff;color:#000000;margin:0;padding:0;text-align:center;height:100%;}
    #content{background-color:#ccc;width:960px;margin:0 auto;height:auto !important;height:90%;min-height:90%;}
    #footer{background-color:#666;width:960px;margin:0 auto;height:10%;}

    In poche parole, bisogna dare delle regole non solo a body ma anche a html (io di solito nei css li unisco sempre).
    Mentre per centrare i due div ho usato margin: 0 auto (0 per i margini top e bottom e auto per left e right. In questo modo i div restano sempre centrati).

    Ho eliminato il posizionamento assoluto ed ho usato un piccolo trucchetto in content.
    Cioè, per tutti i browser e per le utime versioni di IE, basta usare min-height, che permette di dare un’altezza minima fissa al div che poi aumenta in base ai contenuti inseriti. Siccome con IE6 e precedenti non funziona si fa uso di quel trucchetto.

  6. Mauro Accornero scrive:

    E’ una buona soluzione, utilizzare il margine invece del posizionamento assoluto è una buon sistema nel caso non si abbia necessità di posizionare a fondo pagina un elemento (come il footer dell’esempio).

  7. Arquen scrive:

    Ma utilizzando nel primo div min-height:90%; il secondo div (il footer) viene posizionato a fondo pagina. Inoltre se si aggiunge altro testo al primo div questo non viene nascosto e la pagina fa lo scroll…

    Però in effetti è giusto, nel mio esempio se si elimina min-height dal primo div, il footer non si posiziona a fondo pagina, invece utilizzando il posizionamento assoluto, anche eliminando gli height da entrembi i div, il posizionamento a fondo pagina del footer resta.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>