Bob de webbouwer bouwt en verbetert websites 040 848 80 69 bob@bobdewebbouwer.com

Width & Height

Width is de breedte van een element en height is de hoogte van een element.

Soms kun je ook de min-height instellen, dat is de minimale hoogte van een element. De max-height is de maximale hoogte. Uiteraard is min-width dan de minimale breedte, en max-width de maximale breedte.

Je kunt namelijk een vaste hoogte en/of breedte instellen, maar dat hoeft niet perse. Als je niets instelt wordt de benodigde hoogte of breedte automatisch berekend door de browser. Als je geen vaste hoogte en/of breedte instelt kun je met min en max alsnog bepaalde grenzen aangeven.

Als er een vaste breedte of hoogte wordt gebruikt werd deze meestal weergegeven in pixel (px), maar in het kader van responsive design wordt er zeker voor de breedte tegenwoordig vaak gekozen voor een percentage (%). Zo kun je een element 100% breed maken, maar je kunt bijvoorbeeld ook 4 kolommen van elk 25% breed gebruiken.

Viewport Width (vw) en Viewport Height (vh)

Daarnaast worden ook Viewport Width (vw) en Viewport Height (vh) regelmatig gebruikt. De viewport is het gedeelte van de pagina dat op dat moment in beeld is op het scherm. De vh en vw worden uitgedrukt in een percentage van de schermhoogte of schermbreedte. Als een element dus een height heeft van 100vh bedekt dat element het hele scherm in de hoogte, en als het 50vw is bedekt het 50% van de schermbreedte.

Heb je een vraag over dit begrip? Stel je vraag hier!

Gerelateerde begrippen

Gerelateerde artikelen op Bob’s Blog

Geen gerelateerde artikelen gevonden

Hulp nodig met je website?

Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training te verzorgen.

Vraag direct een vrijblijvende offerte aan

Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Of heb je juist wel nog een vraag die je hieronder aan me wilt stellen?

Dan wordt een kleine eenmalige donatie altijd zeer op prijs gesteld 🙂

Bedrag



0 Reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *