Howtoweb.it

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.

Tag: css, html, web design