Umbuzo obuzwa ngokubanzi kwi-design website "ubeka njani ubude bezinto kwi-100%"?
Oku kubonakala ngathi yimpendulo elula. Usebenzisa nje i- CSS ukubeka ubude bezinto kwi-100%, kodwa oku akusoloko welula loo nto ukuze ivumelane nefestile yonke. Makhe sibone ukuba kutheni le nto yenzekayo nento ongayenza ukufeza le ndlela yokubonwa.
Iipixel neepesenti
Xa uchaza ukuphakama kwento usebenzisa isakhiwo seCSS kunye nexabiso elisebenzisa ii-pixels, loo nto iya kuthatha isikhala esininzi esiphezulu kwisiphequluli.
Umzekelo, umhlathi ngokuphakama: 100px; ziya kuthatha iipikseli eziyi-100 zendawo ecacileyo kwisakhiwo sakho. Akunandaba nokuba iwindow yakho yesiphequluli esikhulu kangakanani, eli nqaku liza kuba ngamaphikseli angama-100 ubude.
Ipesenti zisebenza ngokwahlukileyo kuneepekseli. Ngokutsho kwe-W3C inkcazo, ipesenteji eziphakamileyo zibalwa ngokubhekiselele ekuphakameni kwendawo. Ngoko ukuba ubeka umhlathi ngokuphakama: 50%; ngaphakathi kwe div nge-100px, umhlathi uya kuba ngamaphikseli angama-50 ubude, okuyi-50% yento yomzali.
Kutheni Ipesenteji zeeNtsika zihluleka
Ukuba uceba iphepha lewebhu, kwaye unakho ikholomu onokuthanda ukuyifumana ukuphakama okupheleleyo kwefestile, ukuthambekela kwemvelo kukuongeza ubude: 100%; kuloo nto. Emva koko, ukuba ubeka ububanzi ububanzi: 100%; iqela liya kuthatha indawo epheleleyo yekhasi, ngoko ukuphakama kufuneka kusebenze okufanayo, kunene? Ngelishwa, oku akunjalo nhlobo.
Ukuqonda ukuba kutheni le nto yenzeka, kufuneka uqonde ukuba iibrowser zichaza njani ubude nobubanzi. Iipheqululwazi zewebhu zibala ububanzi obukhoyo obukhoyo njengoko umsebenzi wefestile yefestile evuliwe. Ukuba awuyibeki naziphi na ixabiso lobubanzi kumaphepha akho, isiphequluli siza kuhamba ngokuzenzekelayo iziqulatho ukuzalisa ububanzi bonke befestile (ububanzi be-100% buyi-default).
Ixabiso lokuphakama libalwe ngokwahlukileyo kunokuba ububanzi. Enyanisweni, iiphequluli aziyikuvavanya ukuphakama konke ngaphandle kokuba umxholo ubude kangangokuba uphuma ngaphandle kwenkqubo yokujonga (oko kufuna i-bar bar scroll) okanye ukuba umyili wewebhu ubeka ukuphakama okupheleleyo kwento kwiphepha. Ngaphandle koko, isiphequluli sivumela ukuba umxholo ugeleke ngaphakathi kobubanzi be-viewport kuze kufike ekupheleni. Ukuphakama akubali kubalwe kuwo onke.
Iingxaki zenzeka xa ubeka ukuphakama kweepesente kwizinto ezinamalungu omzali ongekho iindawo eziphakamileyo - ngamanye amazwi, izinto ezibazali zinokuphakama okuzenzakalelayo: i-auto; . Ngokwenyani, ubuza umkhangeli-mhlaba ukuba ubale ubude ukusuka kwixabiso elingachazwanga. Ekubeni loo nto yayingalingani nantoni-xabiso, umphumo kukuba i-browser ayenzi nto.
Ukuba ufuna ukubeka ubude kumaphepha akho ewebhu kwipesenteji, kufuneka ubeke ubude bawo bonke abazali bomnye umntu ofuna ukuba ubude buchazwe. Ngamanye amagama, ukuba unayo iphepha elinje:
Isiqulatho apha
Mhlawumbi ufuna i-div kunye nomhlathi kuyo ukuba ube nobude obukhulu be-100%, kodwa loo div inene inezinto ezimbini zomzali:
kwaye. Ukuze uchaze ubude be div ukuya kwindawo ephakamileyo, kufuneka ubeke ubude bomzimba kunye nezinto ze-html.
Ngoko uya kufuneka usebenzise i-CSS ukubeka ubude be-div kuphela, kodwa kunye nomzimba kunye nezinto ze-html. Oku kunokuba ngumceli-mngeni, kuba unokukhawuleza ukuphazamiseka yonke into ebekwe kwi-100% ukuphakama, kuphela ukufezekisa le mpawu oyifunayo.
Ezinye izinto eziza Kuqaphela Xa usebenza kunye ne-100% Heights
Ngoku ukuba uyazi indlela yokubeka ubude bezinto zakho zekhasi kwi-100%, kungonwaba ukuphuma kwaye wenze njalo kuwo onke amaphepha akho, kodwa kukho izinto ezimbalwa omele uziqaphele ngazo:
- Imida kunye ne-padding inokongeza ibha yomqulu apho ungafuni khona. Enye yezinto ezinomsindo endiyifumene ngokusebenza kunye neepesenti zokuphakama (kunye nobubanzi) yilelo ke ukugqithiswa kunye neendundu kwizinto ezifanayo kungongeza imivalo yokupenda kwiphepha, nangona yonke into ibonisa ngaphandle kokufuna imivalo yokuprogram. Oku kungenxa yokuba ukuphakama okanye ububanzi bento kuyinto yokuqala ebalwa. Emva koko ii-marginal and paddings zongezwa. Ngoko ukuba unomzimba onokuphakama kwe-100% kunye neephambili zezantsi kunye neephantsi kweepikseli ezili-10 nganye, kuya kuba nombolo yokubhalwa kweeplayseli ezingaphezulu kwe-20. Khumbula, imodeli yebhokisi ye-CSS yongeza umgama, umda, kunye ne-padding ngobungakanani bento, ngoko ke i-100% nayiphi na enye yeempawu zemizekelo yebhokisi iya kuba ngaphezu kwe-100%.
- Ukuba umxholo wakho uthatha ngaphezu kobude obuchaziweyo, uza kubhala ngaphezulu kwayo. Ngamanye amagama, ukuba unesakhiwo kunye nekholomu engama-80% ukuphakama, kwaye umxholo ongaphakathi kuwo uya kuthatha i-100% yokuphakama, ukuba ngaphezulu 20% iya kuqhubeka ngaphantsi kwekholam kwaye iphule ukuyila kwephepha lakho. Ukuba kukho umxholo ongaphantsi kwikholam, umbhalo uya kubhala ngaphezulu phezulu. Ndidla ngokubona oku kwenzekayo xa umyili wewebhu ezama ukunyanzela ukuphakama kwekhasi aze asebenze ngokugqibeleleyo ukuze aqaliswe, kodwa xa umxholo kwiphepha liguquka kwixesha elizayo, iindawo eziphakamileyo ngokupheleleyo ziphula ukuhamba kwephepha. Oku kuyinyaniso ngokuqinisekileyo xa ukwakha iiwebhsayithi eziphendulayo ezo ububanzi kunye nokuphakama kufuneka zitshintshe ngobukhulu be-viewport.
Ukukulungisa oku, unokubeka ubude beli qembu. Ukuba uyifaka kwi-auto, imivalo yokuprogram iya kubonakala ukuba iyafuneka kodwa iyalala xa ingekho. Eyilungiselela ukuphuka okubonakalayo, kodwa yongeza i-scrollbars apho ungazifuni khona.
Ukusebenzisa iiOvenport Units
Enye indlela ongayilungisa ngayo le mngeni kukuzama ukuhlola ii-CSS Viewport Units. Ngokusebenzisa i-unit height height of measurement, unako ukulinganisa izinto ukuze uthathe ubude obuchaziweyo be-viewport, kwaye oko kuya kutshintsha njengoko i-viewport iyatshintsha! Le yindlela enhle yokufumana ukubonakala kwakho kwee-100% ukubonakala kwiphepha kodwa kusenokuba ziguquguquke kwiidivaysi ezahlukeneyo kunye nobukhulu besikrini.