'N algemene vraag in webwerf ontwerp is "hoe stel jy die hoogte van 'n element tot 100%"?
Dit lyk dalk as 'n maklike antwoord. U gebruik eenvoudig CSS om die hoogte van 'n element tot 100% te stel, maar dit strek nie altyd daardie element om die hele blaaier venster te pas nie. Kom ons uitvind hoekom dit gebeur en wat jy kan doen om hierdie visuele styl te bereik.
Pixels en persentasies
Wanneer u die hoogte van 'n element definieer met behulp van die CSS-eienskap en 'n waarde wat pixels gebruik, sal daardie element soveel vertikale spasie in die blaaier opneem.
Byvoorbeeld, 'n paragraaf met 'n hoogte: 100px; sal 100 pixels vertikale spasie in jou ontwerp opneem. Dit maak nie saak hoe groter jou blaaier venster is nie, hierdie element sal 100 pixels hoog wees.
Persentasies werk anders as pixels. Volgens die W3C-spesifikasie word persentasie hoogtes bereken met betrekking tot die houer se hoogte. So as jy 'n paragraaf met 'n hoogte stel: 50%; In 'n div met 'n hoogte van 100px, sal die paragraaf 50 pixels in hoogte wees, wat 50% van die ouerelement is.
Waarom persentasie hoogtes misluk
As jy 'n webblad ontwerp en jy het 'n kolom wat jy die volle hoogte van die venster wil opneem, is die natuurlike neiging om 'n hoogte toe te voeg: 100%; aan daardie element. Na alles, as jy die breedte aan breedte stel: 100%; die element sal die volle horisontale spasie van die bladsy opneem, so die hoogte moet dieselfde werk, reg? Ongelukkig is dit glad nie die geval nie.
Om te verstaan waarom dit gebeur, moet jy verstaan hoe blaaiers hoogte en breedte interpreteer. Web blaaiers bereken die totale beskikbare breedte as 'n funksie van hoe wyd die blaaier venster oopgemaak word. As u geen wydtewaardes op u dokumente stel nie, sal die blaaier outomaties die inhoud vloei om die volle breedte van die venster te vul (100% breedte is die verstek).
Hoogte waarde word anders bereken as breedte. Trouens, blaaiers evalueer glad nie die hoogte nie, tensy die inhoud so lank is dat dit buite die sigpoort gaan (dit vereis blaaiers) of as die webontwerper 'n absolute hoogte vir 'n element op die bladsy stel. Andersins kan die blaaier eenvoudig die inhoud vloei binne die breedte van die viewport totdat dit tot die einde kom. Die hoogte word eintlik glad nie bereken nie.
Probleme vind plaas wanneer u 'n persentasie hoogte op 'n element met ouer elemente sonder hoogtes stel. Met ander woorde, die ouerelemente het 'n verstekhoogte: outomaties; . U vra in werklikheid die blaaier om 'n hoogte van 'n onbepaalde waarde te bereken. Aangesien dit 'n nulwaarde sou wees, is die gevolg dat die leser niks doen nie.
As jy 'n hoogte op jou webblaaie wil stel teen 'n persentasie, moet jy die hoogte van elke ouer-element van die een wat jy die gedefinieerde lengte wil hê, stel. Met ander woorde, as jy 'n bladsy soos hierdie het:
Inhoud hier
Jy sal waarskynlik die div en die paragraaf daarin hê om 'n 100% hoogte te hê, maar daardie div het eintlik twee ouer-elemente:
en. Om die hoogte van die div tot 'n relatiewe hoogte te definieer, moet u ook die hoogte van die liggaam en html-elemente stel.
So jy sal CSS moet gebruik om die hoogte van nie net die div, maar ook die liggaams- en html-elemente te stel nie. Dit kan 'n uitdaging wees, aangesien jy vinnig oorweldig kan word met alles wat op 100% hoogte gestel word, net om hierdie gewenste effek te bereik.
Sommige dinge om op te let wanneer jy met 100% hoogtes werk
Noudat jy weet hoe om die hoogte van jou bladsy-elemente tot 100% te stel, kan dit opwindend wees om uit te gaan en dit aan al jou bladsye te doen, maar daar is 'n paar dinge wat jy moet bewus wees van:
- Marges en opvulling kan 'n blaaierbalk byvoeg waar jy nie een wil hê nie. Een van die mees irriterende dinge wat ek gevind het met die werk van persentasie hoogtes (en wydtes) is dat die padding en marges op dieselfde elemente blaaiers kan byvoeg tot die bladsy, alhoewel al die inhoud vertoon sonder scrollbalkies. Dit is omdat die hoogte of breedte van die element die eerste ding is wat bereken word. Dan word die marges en paddings bygevoeg. So as jy 'n element met 'n hoogte van 100% en bo en onderkant van 10 pixels elk het, sal daar 'n blaaibalk wees vir die ekstra 20 pixels. Onthou, die CSS-boksmodel voeg marge, rand en voering op die grootte van 'n element, dus 100% met enige van die ander boks-modelwaardes sal eintlik meer as 100% wees.
- As jou inhoud meer as die gedefinieerde hoogte neem, sal dit enigiets daaroor oorskryf. Met ander woorde, as u 'n ontwerp het met 'n kolom wat 80% in hoogte is en die inhoud wat daarin is, sal 100% van die hoogte neem, die ekstra 20% sal onder die kolom voortgaan en die visuele ontwerp breek. van jou bladsy. As daar inhoud onder die kolom is, sal die teks eenvoudig bo-op dit skryf. Ek sien dit dikwels gebeur wanneer 'n webontwerper die hoogte van 'n bladsy probeer dwing en dit perfek laat werk vir die bekendstelling, maar wanneer inhoud op daardie bladsy verander in die toekoms, breek hul absolute hoogtes die vloei van die bladsy heeltemal af. Dit is dubbel waar as jy reageer webwerwe bou waarvan die breedte en die hoogte moet verander met die grootte van die viewport.
Om dit reg te stel, kan jy die hoogte van die element ook stel. As u dit outomaties stel, sal die skuifbalk verskyn as dit nodig is, maar verdwyn wanneer dit nie is nie. Dit verbeter die visuele breek, maar dit voeg blaarbalk by waar jy dit nie wil hê nie.
Gebruik Viewport Units
Nog 'n manier waarop jy hierdie uitdaging kan aanpak, is om met CSS Viewport Units te eksperimenteer. Deur die meting van die hoogtepunt-hoogte te gebruik, kan u die grootte van die elemente om 'n bepaalde hoogte van die uitsigspoort te gebruik, en dit sal verander namate die aansig verander! Dit is 'n goeie manier om jou 100% -hoogtebeeldse op 'n bladsy te kry, maar hulle het steeds buigsaam vir verskillende toestelle en skermgroottes.