Share
Det finns ett känt problem i webbdesign som har funnits någonsin sedan vi flyttat från dagarna med bordsbaserad design till CSS-eran, och det är:
Hur kan jag få 100% höjdbakgrund i min flexibla layout med flera kolumner?
Det finns några lösningar på detta dilemma. Men den som vi ska täcka kan vara rätt för ditt projekt om du behöver:
Ett alternativ är att beställa en av de snabba och effektiva webbplatsanpassningstjänsterna från Envato Studio. Du kan välja från en mängd erfarna leverantörer, kolla deras recensioner och skicka dem detaljer om de exakta ändringar du behöver.
Annars, låt oss börja med en snabb titt på problemet.
Nedan visas en enkel tre kolumnlayout, med en standardmetod för att flyta varje kolumn till vänster. Med bakgrunden som används i standardmetoden justerar kolumnerna till höjden av deras innehåll så här:
Detta är funktionellt, men inte riktigt den mest tilltalande layouten i ögat på grund av den stora skillnaden i höjder.
I HTML-koden för ovanstående placeras tre "kolumninnehåll" -element i ett omslag:
.........
CSS för dessa "kolumninnehåll" -element är:
.innehåll bredd: 60%; flyta till vänster; vaddering: 20px 30px; bakgrund: #fff; färg: # 6d7072; .sidebar bredd: 20%; flyta till vänster; vaddering: 20px 30px; bakgrund: # 5f6673; färg: # ebeef3; typsnittstorlek: 90%; .sidebar_two bredd: 20%; flyta till vänster; vaddering: 20px 30px; bakgrund: # 434750; färg: # ebeef3; typsnittstorlek: 90%;
När vi hänvisar till lika höga kolumner är det som vi vanligtvis vill uppfylla två villkor:
I vårt exempel ovan har vi redan det första skicket med flexibel höjd som är nöjd. Men bakgrundsstilar och flexibla höjdregler är alla en del av samma klass, som tillämpas på samma element. Oavsett vilken höjd regler som det här elementet följer följer bakgrunden dem också.
Därför, om vi vill ha bakgrunden att ha olika höjdinställningar, behöver vi separata element som vi kan tillämpa bakgrundsstilar till tillsammans med deras egna uppsättning höjdregler. För att skapa dessa separata element utan att lägga till någon extra markup, kommer vi att använda pseudo-element.
För varje kolumn kommer vi att använda :innan pseudo-väljaren för att skapa ett separat pseudo-element, som vi kommer att tillämpa bakgrundsstilering på. Vi använder då en kombination av absolut positionering och z-index för att placera dessa bakgrunder bakom innehållet för varje kolumn och sätt dem till en jämn höjd.
Den nya CSS för varje kolumn blir:
.innehåll, .innehåll: före bredd: 60%; .content float: left; vaddering: 20px 30px; färg: # 6d7072; .inhoud: före innehåll: "; position: absolut; topp: 0; botten: 0; z-index: -1; vänster: 0; bakgrund: #fff;
.sidofält, .sidebar: före bredd: 20%; .sidebar float: left; vaddering: 20px 30px; färg: # ebeef3; typsnittstorlek: 90%; .sidebar: före innehåll: "; position: absolut; topp: 0; botten: 0; z-index: -1; vänster: 60%; bakgrundsfärg: # 5f6673;
.sidebar_two, .sidebar_two: före bredd: 20%; .sidebar_two float: left; vaddering: 20px 30px; färg: # ebeef3; typsnittstorlek: 90%; .sidebar_two: före innehåll: "; position: absolut; topp: 0; botten: 0; z-index: -1; vänster: 80%; bakgrundsfärg: # 434750;
Vilket ger oss presentationer av fina, jämnt kolumnhöjder:
I ett nötskal är det vad vi gör här att placera "pseudo-elementen" bakomliggande "bakom de vanliga" kolumninnehåll "-elementen för att skapa bakgrundsstilar.
Eftersom dessa "bakhållare" pseudoelement är helt placerade kan vi berätta för exakt var deras ytterkanter borde vara, medan de fortfarande tillåter "kolumninnehåll" -elementen att vara vilken höjd eller bredd de behöver vara.
De 
Accentsconagua
.slå in element, dess tre barnselement och deras pseudo-element
Varje kolumnelement har ett motsvarande pseudoelement, vilket fungerar som bakgrundViktig:Dina kolumner ska vara inuti ett föräldraförpackning (.slå in i det här fallet) inställt på position: relativ; för att den absoluta positioneringen ska fungera. Detta bör rensa efter de flytande kolumnerna för att säkerställa att det får ett höjdsvärde för bakgrunden att sträcka sig till.
Det finns ett par bra tillvägagångssätt där ute som föreslår andra sätt att lösa detta problem. Om du inte behöver specifika fördelar med detta tillvägagångssätt, kanske du föredrar en av följande lösningar.
Om du planerar att använda bara platta färger i dina bakgrunder, är en väldigt smart lösning att tillämpa en horisontell CSS-gradient, vilket skapar färgband för att matcha dina kolumner. Kolla in hur, tack till Chris Coyier.
Men om din design behöver bilder, gränser, CSS3-effekter och så vidare applicerad på din bakgrund kan vår "bakhållare" div-teknik vara bättre passform, t.ex..
En annan väldigt cool lösning är att använda pseudo-selektorerna :innan och :efter på kolumnernas föräldraförpackning för att skapa upp till tre kolumner med lika höga bakgrunder. Du kan läsa om denna teknik, förklarad av Nicolas Gallagher.
Å andra sidan om du behöver mer än tre kolumner kanske du vill använda vår "bakhållare" -teknik istället eftersom du kan ha så många kolumner som du vill. t.ex.
När vi ser utbredd webbläsarstöd för flexbox ska det bli ganska rakt framåt för att göra saker som detta utan att behöva förlita sig på pseudoelement.
Men mellan nu och då är det här ett bra sätt att få jobbet gjort. Det låter dig hålla flexibel bredd för lyhörda layouter, använda så många kolumner som du vill och tillämpa någon form av bakgrundsdesign.
