Ente accreditato Regione Veneto n.4271

Come creare colonne di altezza uguale – Equal Height

A prescindere dal contenuto delle stesse

Pubblicato da Simone // 2 ottobre 2017 // 179 visualizzazioni

Uno dei problemi che puntualmente si presenta nei nostri siti web è quello dell’altezza delle colonne che, se affiancate con un float come siamo soliti fare, possono avere altezze diverse a seconda del contenuto, vincolando di fatto il nostro cliente a dover inserire i contenuti visivi e testuali con un certo criterio per non compromettere la corretta visualizzazione del sito.

Per capirci una situazione molto comune è quella che vediamo nella figura sottostante e che può diventare deleteria nei device costringendoci ad applicare numerosi min-height nei breakpoints per tamponare (non risolvere) il problema.

Equal Height

Per aiutarci a risolvere questo problema senza l’ausilio di plug-in o Flex-box ci viene incontro il CSS con l’attributo/valore, che già abbiamo avuto modo di conoscere in un precedente articolo, display: table; che si presta in maniera rapida ed efficace a questa fastidiosa situazione.

Andiamo quindi a creare un nuovo esercizio, collegare un foglio di stile e compilare il seguente HTML:

Equal Height

Come da figura abbiamo realizzato 3 colonne con un numero di caratteri differente l’una dall’altra. Premuriamoci ora di fare in modo che tutte e 3 le colonne si adattino in altezza a quella col contenuto maggiore, andiamo pertanto a compilare il CSS come segue.

Equal Height

Con un principio facilmente comprensibile determiniamo che i nostri div affiancati sul modello Grid System siano celle del div contenitore che li contiene, in questo modo infatti possiamo avere un totale controllo sulla loro altezza a prescindere da quanto contenuto il nostro cliente deciderà di inserire.

Equal Height

Ricordiamoci infine che per una corretta visualizzazione mobile è necessario intervenire poi nelle Media Queries per modificare un paio di valori così che tutto calzi a pennello.

Equal Height

Niente di più semplice in una procedura che risulta perfettamente retrocompatibile e assolutamente utile alla causa in una problematica molto comune nel nostro lavoro di tutti i giorni.

Topic: , , ,

Send this to a friend