Share
C'è un problema familiare nel web design che esiste da quando ci siamo spostati dai tempi del design basato su tabelle nell'era dei CSS, e cioè:
Come posso avere gli sfondi al 100% di altezza nel mio layout flessibile a più colonne?
Ci sono alcune soluzioni a questo dilemma. Tuttavia, quello che stiamo per coprire potrebbe essere adatto al tuo progetto se hai bisogno di:
Un'opzione è ordinare uno dei servizi di personalizzazione del sito Web veloce ed efficiente da Envato Studio. Puoi scegliere tra una vasta gamma di fornitori esperti, controllare le recensioni e inviare loro i dettagli delle modifiche esatte di cui hai bisogno.
Altrimenti, iniziamo con una rapida occhiata al problema.
Nella foto sotto c'è un semplice layout a tre colonne, usando un approccio standard per far fluttuare ogni colonna a sinistra. Con gli sfondi applicati in modo predefinito, le colonne si adattano all'altezza del loro contenuto in questo modo:
Questo è funzionale, ma non proprio il layout più piacevole alla vista a causa della notevole differenza in altezza.
L'HTML per sopra pone tre elementi di "contenuto di colonna" all'interno di un wrapper:
.........
Il CSS per questi elementi "column content" è:
.contenuto larghezza: 60%; float: sinistra; imbottitura: 20px 30px; sfondo: #fff; colore: # 6d7072; .sidebar width: 20%; float: sinistra; imbottitura: 20px 30px; sfondo: # 5f6673; colore: # ebeef3; dimensione carattere: 90%; .sidebar_two width: 20%; float: sinistra; imbottitura: 20px 30px; sfondo: # 434750; colore: # ebeef3; dimensione carattere: 90%;
Quando ci riferiamo a colonne di uguale altezza, ciò che in genere vogliamo è soddisfare due condizioni:
Nel nostro esempio sopra abbiamo già la prima condizione di altezza flessibile soddisfatta. Tuttavia, gli stili di sfondo e le regole di altezza flessibili fanno tutti parte della stessa classe, applicati allo stesso elemento. Qualunque altezza regoli quell'elemento, lo sfondo seguirà anche loro.
Pertanto, se vogliamo che gli sfondi abbiano impostazioni di altezza diverse, avremo bisogno di elementi separati in cui possiamo applicare gli stili di sfondo insieme al loro insieme di regole di altezza. Per creare questi elementi separati senza aggiungere ulteriori markup, li useremo pseudo-elementi.
Per ogni colonna useremo il :prima pseudo-selettore per generare uno pseudo-elemento separato, al quale applicheremo lo stile di sfondo. Utilizzeremo quindi una combinazione di posizionamento assoluto e z-index per posizionare questi sfondi dietro il contenuto di ciascuna colonna e impostarli su un'altezza uniforme.
Il nuovo CSS per ogni colonna diventa:
.contenuto, .content: before width: 60%; .content float: left; imbottitura: 20px 30px; colore: # 6d7072; .content: before content: "; position: absolute; top: 0; bottom: 0; z-index: -1; left: 0; background: #fff;
.barra laterale, .sidebar: before width: 20%; .sidebar float: left; imbottitura: 20px 30px; colore: # ebeef3; dimensione carattere: 90%; .sidebar: before content: "; position: absolute; top: 0; bottom: 0; z-index: -1; left: 60%; background-color: # 5f6673;
.sidebar_two, .sidebar_two: before width: 20%; .sidebar_two float: left; imbottitura: 20px 30px; colore: # ebeef3; dimensione carattere: 90%; .sidebar_two: before content: "; position: absolute; top: 0; bottom: 0; z-index: -1; left: 80%; background-color: # 434750;
Il che ci offre una presentazione di altezze di colonna piacevoli, pari:
In poche parole, quello che stiamo facendo qui è posizionare in modo assoluto pseudo-elementi di "background holder" dietro i normali elementi "column content" per creare gli stili di sfondo.
Poiché questi pseudo-elementi di "background holder" sono posizionati in modo assoluto, possiamo dire loro esattamente dove dovrebbero essere i loro bordi esterni, pur permettendo che gli elementi del "contenuto di colonna" siano di qualsiasi altezza o larghezza che devono essere.
Il 
Accentsconagua
.avvolgere elemento, i suoi tre elementi figlio e i loro pseudo-elementi
Ogni elemento di colonna ha uno pseudoelemento corrispondente, che funge da sfondoImportante:Le tue colonne dovrebbero trovarsi all'interno di un wrapper genitore (.avvolgere in questo caso) impostato su posizione: relativa; in modo che il posizionamento assoluto funzioni. Questo dovrebbe scomparire dopo le colonne flottanti per assicurarsi che riceva un valore di altezza per gli sfondi su cui estendersi.
Ci sono un paio di grandi approcci là fuori che suggeriscono altri modi per risolvere questo problema. Se non hai bisogno dei vantaggi specifici di questo approccio, potresti preferire una delle seguenti soluzioni.
Se si prevede di utilizzare solo colori piatti negli sfondi, una soluzione molto intelligente consiste nell'applicare un gradiente CSS orizzontale, creando bande di colore da allineare con le colonne. Scopri come, grazie a Chris Coyier.
Tuttavia, se il tuo progetto ha bisogno di immagini, bordi, effetti CSS3 e così via applicati ai tuoi sfondi, la nostra tecnica di "detentore di sfondo" può essere più adatta, ad es..
Un'altra soluzione molto interessante è usare gli pseudo selettori :prima e :dopo sul wrapper padre delle colonne per creare fino a tre colonne con sfondi di uguale altezza. Puoi leggere di questa tecnica, spiegata da Nicolas Gallagher.
D'altra parte, se hai bisogno di più di tre colonne, potresti usare la nostra tecnica di "background holder" perché puoi avere tutte le colonne che vuoi. per esempio.
Una volta che vediamo il supporto diffuso del browser per la flexbox, dovrebbe essere abbastanza semplice fare cose come questa senza aver bisogno di fare affidamento su pseudo-elementi.
Tuttavia, da ora in poi, questo è un ottimo modo per portare a termine il lavoro. Ti consente di mantenere una larghezza flessibile per i layout reattivi, utilizzare tutte le colonne che desideri e applicare qualsiasi tipo di stile di sfondo.
