Swali la kawaida lililoombwa katika kubuni tovuti ni "jinsi gani unaweza kuweka urefu wa kipengele kwa 100%"?
Hii inaweza kuonekana kama jibu rahisi. Unatumia CSS tu kuweka urefu wa kipengele kwa 100%, lakini hii si mara nyingi hutambulisha kipengele hiki ili kufikia dirisha la kivinjari nzima. Hebu tuone ni kwa nini hii hutokea na unachoweza kufanya ili kufikia mtindo huu wa kuona.
Pixels na Asilimia
Unapofafanua urefu wa kipengele kwa kutumia mali ya CSS na thamani inayotumia pixel, kipengele hicho kitachukua nafasi hiyo ya wima katika kivinjari.
Kwa mfano, aya na urefu: 100px; itachukua saizi 100 za nafasi ya wima katika kubuni yako. Haijalishi jinsi kivinjari chako kikubwa cha kivinjari ni, kipengele hiki kitakuwa saizi 100 kwa urefu.
Asilimia hufanya kazi tofauti kuliko saizi. Kwa mujibu wa vipimo vya W3C, urefu wa asilimia huhesabiwa kwa heshima na urefu wa chombo. Kwa hiyo, ikiwa uweka kifungu kwa urefu: 50%; ndani ya div na urefu wa 100px, aya itakuwa pixels 50 urefu, ambayo ni 50% ya kipengele mzazi.
Kwa nini Maeneo ya Upungufu Hushindwa
Ikiwa unaunda ukurasa wa wavuti, na una column ambayo ungependa kuchukua urefu kamili wa dirisha, nia ya asili ni kuongeza urefu: 100%; kwa kipengele hicho. Baada ya yote, ikiwa utaweka upana kwa upana: 100%; kipengele kitachukua nafasi kamili ya usawa wa ukurasa, hivyo urefu unapaswa kufanya sawa, sawa? Kwa bahati mbaya, hii sio wakati wowote.
Ili kuelewa kwa nini hii inatokea, lazima uelewe jinsi vivinjari vinatafsiri urefu na upana. Vivinjari vya wavuti huhesabu upana wa jumla unaopatikana kama kazi ya dirisha pana la kivinjari linafunguliwa. Ikiwa hutaweka maadili yoyote ya upana kwenye nyaraka zako, kivinjari kitasimamia moja kwa moja yaliyomo ili kujaza upana wote wa dirisha (upana wa 100% ni default).
Urefu wa thamani huhesabiwa tofauti na upana. Kwa kweli, browsers hazipima urefu kabisa isipokuwa maudhui ni ya muda mrefu kwamba inatoka nje ya mtazamo (kwa hiyo inahitaji mipaka ya kitabu) au kama mtengenezaji wa wavuti anaweka urefu kamili wa kipengele kwenye ukurasa. Vinginevyo, kivinjari kinaacha tu maudhui ya mtiririko ndani ya upana wa mtazamo mpaka inakaribia. Urefu haukubaliwa kabisa.
Matatizo hutokea unapoweka urefu wa asilimia kwenye kipengele ambacho kina vipengele vya wazazi bila kuweka urefu - kwa maneno mengine, mambo ya wazazi yana urefu wa chini: auto; . Wewe ni, kwa kweli, kuuliza kivinjari kuhesabu urefu kutoka thamani isiyojulikana. Kwa kuwa hiyo ingekuwa sawa na thamani ya null, matokeo yake ni kwamba kivinjari haifai chochote.
Ikiwa unataka kuweka urefu kwenye kurasa zako za wavuti kwa asilimia, unapaswa kuweka urefu wa kila kipengele cha mzazi wa unataka urefu ulielezewa. Kwa maneno mengine, ikiwa una ukurasa kama huu:
Maudhui hapa
Huenda unataka div na aya ndani yake kuwa na urefu wa 100%, lakini div hiyo ina mambo mawili ya wazazi:
na. Ili kufafanua urefu wa div kwa urefu wa jamaa, lazima uweke urefu wa mwili na vipengele vya HTML pia.
Kwa hivyo unahitaji kutumia CSS ili kuweka urefu wa si tu div, lakini pia mwili na vipengele html. Hii inaweza kuwa changamoto, kwa kuwa unaweza haraka kuzikwa na kila kitu kilichowekwa urefu wa 100%, ili kufikia athari hii ya taka.
Vitu vingine vya Kumbuka Wakati wa kufanya kazi na urefu wa 100%
Sasa unajua jinsi ya kuweka urefu wa vipengele vya ukurasa wako kwa 100%, inaweza kuwa ya kusisimua kwenda nje na kufanya hivyo kwenye kurasa zako zote, lakini kuna mambo machache ambayo unapaswa kujua:
- Vifungu na padding vinaweza kuongeza bar ya kitabu ambapo hutaki moja. Mojawapo ya mambo yenye kusikitisha ambayo nimeipata kwa kufanya kazi na urefu wa asilimia (na widths) ni kwamba basi padding na vijijini juu ya vipengele vimovyo vinaweza kuongeza baa za kurasa kwenye ukurasa, ingawa maudhui yote yanaonyesha bila kuhitaji mipaka ya kitabu. Hii ni kwa sababu urefu au upana wa kipengele ni jambo la kwanza lililohesabiwa. Kisha vijiji na vidonge vinaongezwa. Kwa hiyo ikiwa una kipengele cha urefu wa 100% na juu na chini ya safu ya pixel 10 kila, kutakuwa na bar ya kitabu cha saizi 20 za ziada. Kumbuka, mtindo wa sanduku la CSS unaongeza margin, mpaka, na padding kwenye ukubwa wa kipengele, hivyo 100% na yoyote ya maadili mengine ya maonyesho ya sanduku yatakuwa zaidi ya 100%.
- Ikiwa maudhui yako yanachukua zaidi ya urefu uliofafanuliwa, itaandika kitu chochote baada yake. Kwa maneno mengine, ikiwa una mpango unao na urefu wa 80%, na yaliyomo ndani yake itachukua urefu wa 100%, kwamba zaidi ya 20% itaendelea chini ya safu na kuvunja muundo wa visu ya ukurasa wako. Ikiwa kuna maudhui yaliyomo chini ya safu hiyo, maandishi yataandika juu ya juu. Mara nyingi niona hii ikitokea wakati mtengenezaji wa wavuti anajaribu kulazimisha urefu wa ukurasa na anafanya kazi kikamilifu kwa ajili ya uzinduzi, lakini wakati maudhui katika ukurasa huo yatabadilika wakati ujao, urefu wao kamili kabisa huvunja mtiririko wa ukurasa. Hiyo ni kweli kweli wakati unapanga tovuti zisizofaa ambazo upana na urefu lazima ubadike na ukubwa wa mtazamo.
Ili kurekebisha hili, unaweza kuweka urefu wa kipengele pia. Ikiwa ukiweka kwa auto, safu za kurasa zitatokea ikiwa zinahitajika lakini zinatoweka wakati hazipo. Hiyo hutengeneza mapumziko ya kuona, lakini inaongeza scrollbars ambapo huenda usiwataka.
Kutumia Unport Units
Njia nyingine unaweza kukabiliana na changamoto hii ni kujaribu majaribio ya CSS Viewport. Kwa kutumia kitengo cha urefu cha upimaji wa upimaji, unaweza vipengele vya ukubwa kuchukua urefu uliofafanuliwa wa maoni, na hiyo itabadilika kama mabadiliko ya mtazamo! Hii ni njia nzuri ya kupata picha yako ya juu ya 100% kwenye ukurasa lakini bado inawawezesha kubadilika kwa vifaa tofauti na ukubwa wa skrini.