Share
Det er et kjent problem i webdesign som har eksistert helt siden vi flyttet fra dagene med bordbasert design til CSS-epoken, og det er:
Hvordan kan jeg ha 100% høydebakgrunner i fleksibel flerkolonne-layout?
Det er noen løsninger på dette dilemmaet. Men den vi skal dekke kan være riktig for prosjektet ditt hvis du trenger:
Ett alternativ er å bestille en av de hurtige, effektive nettstedene tilpasningstjenester fra Envato Studio. Du kan velge fra en rekke erfarne leverandører, sjekke sine vurderinger, og deretter sende dem detaljer om de nøyaktige endringene du trenger.
Ellers, la oss starte med en rask titt på problemet.
Bildet nedenfor er en enkel tre kolonne layout, ved hjelp av en standard tilnærming å flytte hver kolonne til venstre. Med bakgrunn som er brukt i standardmoden, tilpasser kolonnene seg til høyden på innholdet slik:
Dette er funksjonelt, men ikke helt den mest behagelige utformingen til øyet på grunn av den betydelige forskjellen i høyder.
HTML-koden for ovenstående plasserer tre "kolonneinnhold" -elementer i en wrapper:
.........
CSS for disse "kolonneinnhold" -elementene er:
.innhold bredde: 60%; float: venstre; polstring: 20px 30px; bakgrunn: #fff; farge: # 6d7072; .sidebar bredde: 20%; float: venstre; polstring: 20px 30px; bakgrunn: # 5f6673; farge: # ebeef3; skriftstørrelse: 90%; .sidebar_two bredde: 20%; float: venstre; polstring: 20px 30px; bakgrunn: # 434750; farge: # ebeef3; skriftstørrelse: 90%;
Når vi refererer til like høyde kolonner, er det vi vanligvis ønsker å tilfredsstille to forhold:
I vårt eksempel ovenfor har vi allerede den første tilstanden med fleksibel høyde fornøyd. Men bakgrunnsstiler og fleksible høyderegler er alle en del av samme klasse, brukt på det samme elementet. Uansett høyde regler som elementet følger, vil bakgrunnen følge dem også.
Derfor, hvis vi ønsker at bakgrunnene skal ha forskjellige høydeinnstillinger, trenger vi separate elementer som vi kan bruke bakgrunnsstilene til sammen med sitt eget sett med høydenegler. For å lage disse separate elementene uten å legge til noen ekstra oppslag, skal vi bruke pseudo-elementer.
For hver kolonne vil vi bruke :før pseudo-selector for å generere et eget pseudo-element, som vi vil anvende bakgrunns styling. Vi vil da bruke en kombinasjon av absolutt posisjonering og z-indeks å plassere disse bakgrunnene bak innholdet for hver kolonne og sette dem til en jevn høyde.
Den nye CSS for hver kolonne blir:
.innhold, .innhold: før bredde: 60%; .content float: left; polstring: 20px 30px; farge: # 6d7072; .content: før innhold: "; posisjon: absolutt; topp: 0; bunn: 0; z-indeks: -1; venstre: 0; bakgrunn: #fff;
.sidebar, .sidebar: før bredde: 20%; .sidebar float: left; polstring: 20px 30px; farge: # ebeef3; skriftstørrelse: 90%; .sidebar: før innhold: "; posisjon: absolutt; topp: 0; bunn: 0; z-indeks: -1; venstre: 60%; bakgrunnsfarge: # 5f6673;
.sidebar_two, .sidebar_two: før bredde: 20%; .sidebar_two float: left; polstring: 20px 30px; farge: # ebeef3; skriftstørrelse: 90%; .sidebar_two: før innhold: "; posisjon: absolutt; topp: 0; bunn: 0; z-indeks: -1; venstre: 80%; bakgrunnsfarge: # 434750;
Som gir oss presentasjon av fine, jevne kolonnehøyder:
I et nøtteskall hva vi gjør her, er å plassere "pseudo-elementer" bakgrunnsholder "bak de vanlige" kolonneinnhold "-elementene for å lage bakgrunnsstiler.
Fordi disse "pseudoelementene" i bakgrunnen er helt posisjonerte, kan vi fortelle dem nøyaktig hvor deres ytre kanter burde være, samtidig som elementene i "kolonneinnholdet" kan være noen høyde eller bredde de trenger å være.
De 
Accentsconagua
.pakke inn element, dets tre barns elementer og deres pseudo-elementer
Hvert kolonneelement har et tilsvarende pseudoelement, som fungerer som bakgrunnViktig:Dine kolonner skal være inne i en foreldreinnpakning (.pakke inn i dette tilfellet) satt til stilling: relativ; for at absolutt posisjonering skal fungere. Dette bør tømme etter de flytende kolonnene for å sikre at den mottar en høydeverdi for bakgrunnen å strekke seg til.
Det er et par gode tilnærminger der ute som foreslår andre måter å løse dette problemet på. Hvis du ikke trenger de spesifikke fordelene med denne tilnærmingen, kan du foretrekke en av følgende løsninger.
Hvis du planlegger å bruke bare flade farger i bakgrunnen, er det en veldig smart løsning å bruke en horisontal CSS-gradient, og skape fargebånd for å linje opp med kolonnene dine. Sjekk ut hvordan, takk til Chris Coyier.
Men hvis designet ditt trenger bilder, grenser, CSS3-effekter og så videre, brukes på bakgrunnen din, kan vår "bakgrunnsholder" div teknikk være bedre egnet, f.eks..
En annen veldig kul løsning er å bruke pseudo-seleksjonene :før og :etter på kolonnens foreldreinnpakning for å lage opptil tre kolonner med like høydebakgrunner. Du kan lese om denne teknikken, forklart av Nicolas Gallagher.
På den annen side, hvis du trenger mer enn tre kolonner, vil du kanskje bruke vår "bakkeholder" -teknikk i stedet for at du kan ha så mange kolonner som du vil. f.eks.
Når vi ser utbredt nettleserstøtte for flexbox, bør det bli ganske rett frem for å gjøre slike ting uten å måtte stole på pseudo-elementer.
Men mellomtiden er dette en fin måte å få jobben gjort på. Den lar deg holde fleksibel bredde for responsive layouter, bruk så mange kolonner som du vil, og bruk hvilken som helst type bakgrunnsstyling.
