Share
Er is één bekend probleem in webontwerp dat al bestaat sinds we zijn overgestapt van de dagen van tafelgebaseerd ontwerp naar het CSS-tijdperk, en dat is:
Hoe kan ik 100% hoogte-achtergronden hebben in mijn flexibele indeling met meerdere kolommen?
Er zijn een paar oplossingen voor dit dilemma. Echter, degene die we gaan dekken, is misschien wel geschikt voor uw project als u:
Een optie is om een van de snelle, efficiënte aanpassingsservices voor websites van Envato Studio te bestellen. U kunt kiezen uit verschillende ervaren providers, hun beoordelingen bekijken en vervolgens de details sturen van de exacte wijzigingen die u nodig hebt.
Anders beginnen we met een snelle blik op het probleem.
Hieronder ziet u een eenvoudige lay-out met drie kolommen, waarbij u een standaardbenadering gebruikt om elke kolom aan de linkerkant te laten zweven. Als achtergronden standaard worden toegepast, passen de kolommen zich aan aan de hoogte van hun inhoud, zoals zo:
Dit is functioneel, maar niet de meest aangename lay-out voor het oog vanwege het grote hoogteverschil.
De HTML voor het bovenstaande plaatst drie "kolominhoud" -elementen in een wrapper:
.........
De CSS voor deze elementen "kolominhoud" is:
.inhoud breedte: 60%; float: left; opvulling: 20px 30px; achtergrond: #fff; kleur: # 6d7072; .sidebar width: 20%; float: left; opvulling: 20px 30px; achtergrond: # 5f6673; kleur: # ebeef3; tekengrootte: 90%; .sidebar_two width: 20%; float: left; opvulling: 20px 30px; achtergrond: # 434750; kleur: # ebeef3; tekengrootte: 90%;
Wanneer we naar kolommen met gelijke hoogte verwijzen, willen we doorgaans aan twee voorwaarden voldoen:
In ons voorbeeld hierboven hebben we al de eerste voorwaarde van flexibele hoogte voldaan. De achtergrondstijlen en flexibele hoogteregels maken echter allemaal deel uit van dezelfde klasse, toegepast op hetzelfde element. Welke hoogte regels dat element ook volgt, de achtergrond volgt ze ook.
Als we daarom willen dat de achtergronden verschillende hoogte-instellingen hebben, hebben we afzonderlijke elementen nodig waarop we de achtergrondstijlen kunnen toepassen samen met hun eigen set hoogteregels. Om deze afzonderlijke elementen te maken zonder extra markeringen toe te voegen, gaan we gebruiken pseudo-elementen.
Voor elke kolom gebruiken we de :voor pseudo-selector om een apart pseudo-element te genereren, waarop we achtergrondstyling toepassen. We zullen dan een combinatie van absolute positionering en gebruiken z-index om deze achtergronden achter de inhoud van elke kolom te plaatsen en ze op een uniforme hoogte in te stellen.
De nieuwe CSS voor elke kolom wordt:
.content, .content: before width: 60%; .content float: left; opvulling: 20px 30px; kleur: # 6d7072; .content: before content: "; position: absolute; top: 0; bottom: 0; z-index: -1; left: 0; background: #fff;
.zijbalk, .sidebar: before width: 20%; .sidebar float: left; opvulling: 20px 30px; kleur: # ebeef3; tekengrootte: 90%; .sidebar: before content: "; position: absolute; top: 0; bottom: 0; z-index: -1; left: 60%; background-colour: # 5f6673;
.sidebar_two, .sidebar_two: before width: 20%; .sidebar_two float: left; opvulling: 20px 30px; kleur: # ebeef3; tekengrootte: 90%; .sidebar_two: before content: "; position: absolute; top: 0; bottom: 0; z-index: -1; left: 80%; background-color: # 434750;
Dat geeft ons de presentatie van mooie, zelfs kolomhoogtes:
In een notendop wat we hier doen, is het absoluut plaatsen van "achtergrondhouder" pseudo-elementen achter de reguliere "kolominhoud" -elementen om achtergrondstijlen te creëren.
Omdat deze "achtergrondhouder" pseudo-elementen absoluut gepositioneerd zijn, kunnen we hen exact vertellen waar hun buitenste randen zouden moeten zijn, terwijl ze toch toestaan dat de "kolominhoud" -elementen elke hoogte of breedte hebben die ze nodig hebben.
De 
Accentsconagua
.wikkelen element, de drie onderliggende elementen en hun pseudo-elementen
Elk kolomelement heeft een overeenkomstig pseudo-element, dat als achtergrond fungeertBelangrijk:Uw kolommen moeten zich in een bovenliggende wrapper bevinden (.wikkelen in dit geval) ingesteld op positie: relatief; om de absolute positionering te laten werken. Dit moet na de zwevende kolommen worden verwijderd om ervoor te zorgen dat het een hoogtewaarde ontvangt voor de achtergronden die worden uitgerekt.
Er zijn een aantal geweldige benaderingen die andere manieren suggereren om dit probleem op te lossen. Als u de specifieke voordelen van deze aanpak niet nodig hebt, hebt u misschien de voorkeur voor een van de volgende oplossingen.
Als u van plan bent om alleen platte kleuren in uw achtergronden te gebruiken, dan is een heel slimme oplossing om een horizontale CSS-gradiënt toe te passen, waarbij u kleurenbundels maakt die overeenkomen met uw kolommen. Bekijk hoe, dankzij Chris Coyier.
Als uw ontwerp echter afbeeldingen, randen, CSS3-effecten enzovoort nodig heeft voor uw achtergronden, kan onze "achtergrondhouder" div-techniek een betere pasvorm zijn, bijvoorbeeld.
Een andere erg coole oplossing is om de pseudo-selectors te gebruiken :voor en :na op de bovenliggende wrapper van de kolommen om maximaal drie kolommen met gelijke hoogte-achtergronden te maken. Je kunt over deze techniek lezen, uitgelegd door Nicolas Gallagher.
Aan de andere kant, als u meer dan drie kolommen nodig heeft, zou u onze "achtergrondhouder" -techniek kunnen gebruiken, omdat u zoveel kolommen kunt hebben als u wilt. bv.
Zodra we brede ondersteuning voor de browser voor flexbox zien, zou het vrij eenvoudig moeten worden om dit soort dingen te doen zonder te hoeven vertrouwen op pseudo-elementen..
Maar tussen nu en toen is dit een geweldige manier om de klus te klaren. Hiermee kunt u de flexibele breedte behouden voor responsieve lay-outs, zoveel kolommen gebruiken als u wilt en elk type achtergrondstijl toepassen.
