Een veelgestelde vraag bij het ontwerpen van websites is "hoe stel je de hoogte van een element in op 100%"?
Dit lijkt misschien een eenvoudig antwoord. U gebruikt eenvoudigweg CSS om de hoogte van een element in te stellen op 100%, maar dit element wordt niet altijd uitgerekt om in het volledige browservenster te passen. Laten we uitvinden waarom dit gebeurt en wat u kunt doen om deze visuele stijl te bereiken.
Pixels en percentages
Wanneer u de hoogte van een element definieert met behulp van de CSS-eigenschap en een waarde die pixels gebruikt, neemt dat element zoveel verticale ruimte in de browser in beslag. Een alinea met bijvoorbeeld een
hoogte: 100 px;
neemt 100 pixels verticale ruimte in beslag in uw ontwerp. Het maakt niet uit hoe groter uw browservenster is, dit element zal 100 pixels hoog zijn. Percentages werken anders dan pixels. Volgens de W3C-specificatie worden de procentuele hoogten berekend met betrekking tot de hoogte van de container. Dus als je een alinea met een zet hoogte: 50%;
in een div met een hoogte van 100px is de alinea 50 pixels hoog, wat 50% van het bovenliggende element is. Als u een webpagina ontwerpt en u een kolom hebt die u over de volledige hoogte van het venster wilt weergeven, is het de natuurlijke neiging om een hoogte: 100%;
naar dat element. Immers, als u de breedte
naar breedte: 100%;
het element neemt de volledige horizontale ruimte van de pagina in beslag, dus hoogte
zou hetzelfde moeten werken, toch? Helaas is dit helemaal niet het geval. Om te begrijpen waarom dit gebeurt, moet u begrijpen hoe browsers hoogte en breedte interpreteren. Webbrowsers berekenen de totale beschikbare breedte als een functie van hoe wijd het browservenster wordt geopend. breedte
Als u geen waarden op uw documenten instelt, zal de browser de inhoud automatisch laten stromen om de volledige breedte van het venster te vullen (100% breedte is de standaardwaarde). Hoogtewaarde wordt anders berekend dan de breedte. In feite evalueren browsers de hoogte helemaal niet, tenzij de inhoud zo lang is dat deze buiten het kijkvenster komt (en dus schuifbalken nodig heeft) of als de webontwerper een absoluut element instelt voor een element op de pagina. hoogte
Anders laat de browser de inhoud eenvoudig binnen de breedte van het kijkvenster stromen tot het einde is bereikt. De hoogte wordt eigenlijk helemaal niet berekend. Problemen treden op wanneer u een percentagehoogte instelt op een element met bovenliggende elementen zonder hoogteset, met andere woorden, de bovenliggende elementen hebben een standaardwaarde. hoogte: auto;
U vraagt de browser in feite om een hoogte te berekenen op basis van een ongedefinieerde waarde. Aangezien dat gelijk zou zijn aan een nulwaarde, is het resultaat dat de browser niets doet. Als u een hoogte op uw webpagina's wilt instellen op een percentage, moet u de hoogte instellen van elk ouderelement van degene die u de hoogte wilt laten definiëren. Met andere woorden, als u een pagina heeft zoals deze: Inhoud hier
Je wilt waarschijnlijk de div
en de alinea erin heeft een 100% hoogte, maar die div heeft dat eigenlijk wel twee ouder elementen: en. Om de hoogte van de te bepalen div
tot een relatieve hoogte, moet u de hoogte van de lichaam
en html
elementen ook. Dus je zou CSS moeten gebruiken om de hoogte in te stellen van niet alleen de div, maar ook de body en HTML-elementen. Dit kan een uitdaging zijn, omdat je snel overweldigd kunt raken door alles op 100% hoogte in te stellen, alleen om dit gewenste effect te bereiken. Nu u weet hoe u de hoogte van uw pagina-elementen op 100% instelt, kan het spannend zijn om uit te gaan en dat te doen aan al uw pagina's, maar er zijn een paar dingen waar u op moet letten: Om dit te verhelpen, kunt u ook de hoogte van het element instellen. Als je het instelt op auto,
schuifbalken verschijnen als ze nodig zijn maar verdwijnen als ze dat niet zijn.Dat herstelt de visuele onderbreking, maar het voegt schuifbalken toe waar je ze misschien niet wilt hebben. Een andere manier om deze uitdaging aan te gaan, is door te experimenteren met CSS Viewport Units. Door de meeteenheid van de kijkvensterhoogte te gebruiken, kunt u elementen op maat maken om een gedefinieerde hoogte van het kijkvenster op te nemen, en dat zal veranderen als het kijkvenster verandert! Dit is een geweldige manier om uw 100% hoogte-afbeeldingen op een pagina te krijgen, maar ze zijn nog steeds flexibel voor verschillende apparaten en schermformaten. Waarom Percentagehoogten mislukken
Sommige dingen om op te letten bij het werken met 100% hoogtes
Viewport-units gebruiken
