Realizzare un layout sticky footer con colonne fullheight grazie alle table css

Nel nostro lavoro di sviluppatori ci capita spesso di doverci confrontare con problemi più o meno complessi.

Due di questi problemi sono la realizzazione di una pagina alta almeno il 100% della finestra del browser (di cui ho già parlato in questo articolo) e la realizzazione di uno sticky footer (footer tenuto sempre in basso a prescindere dalla lunghezza del contenuto).

Sono situazioni divenute talmente comuni che ormai forum e blog pullulano di metodi per risolverli. A me però è capitata una situazione un po’ più particolare: il problema era rappresentato dai due precedenti fusi assieme!

Come fare quando si vuole realizzare una pagina che abbia uno sticky footer e nello stesso tempo avere un contenuto che occupi il 100% dello spazio centrale compreso tra header e footer?

Credo sia inutile dirvi che un semplice height:100% non funziona, ma se continuate a prestare attenzione al mio articolo saprete come risolvere questo problema sfruttando le CSS table.

Cosa sono le CSS Table?

Per CSS Table intendo l’insieme di elementi annidati che, mediante l’utilizzi di opportune proprietà CSS si comportano come se fossero una tabella nonostante non vengano utilizzati i tag <table> e tutti quelli che ne discendono.

In questo modo possiamo approfittare di una parte dei vantaggi che ha una tabella, conservando comunque una struttura che si basi su proprietà css, che sono senza ombra di dubbio molto meglio delle vecchie impaginazioni con le table. Direi che questo è ormai un caso chiuso da tempo.

Ci tengo inoltre a precisare che non dico assolutamente che questa sia la migliore impostazione di base da dare a tutte le proprie pagine: ci sono casi in cui non serve necessariamente un’impostazione come questa anche per ottenere risultati molto molto simili, oppure è possibile utilizzare il javascript per ottenerne di medesimi effetti, o ancora può semplicemente non interessarci ottenere un risultato simile a quello che stiamo per vedere.

Mi limito a dare una delle alternative proposte, esattamente come tutte quelle per realizzare uno sticky footer che sono venute fuori nel tempo. Soprattutto non ho intenzione di remare controcorrente cercando di riorientare gli sviluppatori verso l’uso delle tabelle, tecnica che ormai è stata abbandonata da tempo.

Fatte queste piccole considerazioni vi elenco le proprietà che sfrutteremo per raggiungere l’obbiettivo di questo articolo:

  1. Una migliore gestione delle altezze degli elementi: con gli elementi dichiarati nel css come table o table-cell gli height in percentuale funzionano molto meglio di quanto non funzionino con elementi di tipo block.

  2. Gestire gli allinamenti verticali: utilizzando le CSS Table è possibile utilizzare la proprietà che troppo poco spesso sappiamo come utilizzare: vertical-align.

Le proprietà di una CSS Table sono assegnate nella regola display e le principali sono table, table-row, table-cell (potete notare la somiglianza a <table>, <tr>, <td>, anche se c’è da dire che non si usano proprio allo stesso modo).

Sono proprio queste proprietà che andremo a sfruttare per creare un layout sticky footer e con colonne fullheight.

Il risultato che voglio ottenere in questa guida è visibile qui.

La parte che maggiormente deve stuzzicare la nostra attenzione è quella centrale. Come potete vedere c’è un contenuto diviso in tre colonne che occupano sempre tutto lo spazio contenuto tra header e footer (è tutta la colonna ad ingrandirsi, non solo il colore di sfondo, lo potete notare anche dai bordi).

Componiamo il layout

Definiamo la struttura di base del codice HTML

<div id="container">
	<div class="row">
		<div id="header">
			<h1>Colonne FullHeight</h1>
		</div>
	</div>
	
	<div class="row"> 
		<div id="middle">
			<!-- Le colonne andranno qui -->
		</div>
	</div>
<div class="row">
		<div id="footer">
			<p>Lorem Ipsum dolorem sit amet</p>
		</div>
	</div>
			
</div>

Di seguito invece gli stili da applicargli:

/* core layout */
html,body{height:100%}
body{margin:0; min-width:678px}

#container {
	display:table;
	table-layout:fixed;
	height:100%;
	width:100%;
}

.row{ display:table-row;}

#header, #middle, #footer { display:table-cell;}
#middle{height:100%;}

/* extra formatting */
body {font-family: arial }
#footer, #header { padding: 0 10px; }

#header{
	background:#ABABAB;
	color:#333;
	border-bottom: 1px solid #9A9A9A
}
#header h1 { text-align:center; text-transform: uppercase; color: #FFF}
#footer{
	background:#FE7C00;
}

Questa prima parte imposta un contenitore alto almeno il 100% della pagina, con un header in alto e uno sticky footer.

Il risultato che avete ottenuto dovrebbe essere simile a questo:

risultato (1)

Adesso non lo vedete perchè è ancora bianco e vuoto ma se analizzate l’elemento #middle al centro noterete che riempie sempre tutto lo spazio compreso tra header e footer.

Inseriamo adesso l’html della parte centrale:

<div id="content">    
	<div id="col1">
		<h3>Lorem ipsum</h3>
		<ul>
			<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			<li>Mauris accumsan erat sapien.</li>
			<li>Donec sodales leo sapien, vitae egestas dolor posuere id.</li>
		</ul>
	</div>
	<div id="col2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nullam pretium, ante a fringilla ornare, est sem convallis purus, quis placerat lorem magna sit amet massa. Sed adipiscing turpis in velit tincidunt aliquam. 
Mauris congue vestibulum arcu ac rutrum.
Donec aliquam nunc vel libero suscipit, sed venenatis quam consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis orci libero.
Etiam a sollicitudin eros, vel ultricies urna. In ut sagittis urna. 
Fusce dolor turpis, malesuada a sapien vel, tristique adipiscing nunc. 
Curabitur viverra ipsum id mi ullamcorper iaculis. 
Praesent auctor, turpis eu condimentum rhoncus, enim nisi varius nisl, lobortis mollis metus leo nec est.</p>

		<p>Nullam gravida lectus at vestibulum consectetur. Nulla nec elementum erat, et eleifend metus. Vivamus elementum magna elit, sit amet viverra diam pretium eu. Maecenas rutrum euismod ligula, ut pretium lorem ornare sit amet. Morbi tempus gravida consectetur. Etiam ornare sem vel nibh mattis, non sagittis tortor viverra. Nulla eget tortor auctor, tincidunt quam quis, elementum odio. Nam vel hendrerit eros. Ut in vulputate ante.</p>
	</div>
	<div id="col3">
		<h3>Lorem ipsum</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan erat sapien, eu tincidunt tortor vehicula vel.</p>
	</div>
</div>

E sostituiamo tutto il CSS precedente con questo:

/* core layout */
		/* core layout */
html,body{height:100%}
body{margin:0; min-width:678px}

#container, #content{
	display:table;
	table-layout:fixed;
	height:100%;
	width:100%;
}

.row{ display:table-row;}

#header, #middle, #footer { display:table-cell;}
#middle{height:100%;}

#col1, #col2, #col3{
	display:table-cell;
	height:100%;
	vertical-align:top;
}
#col1, #col3{width:250px;}

/* extra formatting */
body {font-family: arial }
#footer, #header, #col1, #col2, #col3 { padding: 0 10px; }

#col1{
	background:#EEEEEE;
}
#col2{
	background:#FFF;
}
#col3{
	background: #EEEEEE;
}
#header{
	background:#ABABAB; 
	color:#333;
	border-bottom: 1px solid #9A9A9A
}
#header h1 { text-align:center; text-transform: uppercase; color: #FFF}
#footer{
	background:#FE7C00;
}

Come potete vedere abbiamo in sostanza aggiunto un nuovo elemento (#content) a cui abbiamo assegnato display:table al centro, potendolo così dividere in varie colonne tutte alte il 100%. Raggiungendo infine questo risultato.

 In conclusione

Abbiamo visto come realizzare un particolare tipo di layout con sticky footer e colonne fullheight.

Potete scaricare il file completo a questo link.

Come ho già precisato prima vi invito semplicemente ad osservare questa impostazione e utilizzarla quando è opportuno, non è sempre necessario utilizzare un layout basato sui display:table, anzi quando succede è un caso abbastanza raro, ma credo che sia proprio la possibilità di risolvere facilmente anche i casi rari che ci fa fare la differenza.

Spero che abbiate apprezzato la mia impostazione. Per qualsiasi domanda, critica o complimento resto disponibile nei limiti delle mie possibilità tramite i commenti.

Tag: , ,

L'autore

Diviso tra informatica e illusionismo, Antonio è un appassionato WebDeveloper freelance che ama mettersi alla prova con sfide sempre più stimolanti. Dalla mentalità imprenditoriale e dal pensiero "outside the box", è stato sedotto da Wordpress, Bootstrap e Laravel, divenute ormai le sue tenere amanti, aiutandolo a realizzare ogni progetto in maniera intelligente e ben curata.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

1 commento

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo