Umbuzo ovame ukubuza ku-website design "ungabeka kanjani ukuphakama kwesici ku-100%"?
Lokhu kungase kubonakale sengathi impendulo elula. Uvele usebenzise i- CSS ukusetha ukuphakama kwesici sibe yi-100%, kodwa lokhu akulona ngaso sonke isikhathi isilula leso sici ukuze uvumelane nesiphequluli sonke sesiphequluli. Ake sithole ukuthi kungani lokhu kwenzeka nokuthi yini ongayenza ukuze uzuze lesi sitayela esibukwayo.
Amaphikseli namaPhesenti
Uma uchaza ukuphakama kwento usebenzisa isakhiwo se- CSS kanye nenani elisebenzisa amaphikseli, leso sici sizothatha isikhala esiningi esiphezulu kusiphequluli.
Isibonelo, isigaba ngokuphakama: 100px; kuzothatha amaphikseli angu-100 wekhala eliqondile kumklamo wakho.Akunandaba ukuthi iwindi lesiphequluli sakho sikhulu kangakanani, lesi sici sizoba amaphikseli angu-100 ekuphakameni.
Amaphesenti asebenza ngokuhlukile kunama-pixel. Ngokwesimo se-W3C, amaphesenti angu-percentage abalwa ngokuqondene nokuphakama kwesitsha. Ngakho uma ubeka isigaba ngokuphakama: 50%; ngaphakathi kwe div ngokuphakama kwe-100px, isigaba sizoba ngamaphikseli angu-50 ekuphakameni, okuyi-50% yento yomzali.
Kungani Amaphesenti Amaphesenti Ahluleka
Uma uhlela ikhasi lewebhu, futhi unekholomu ongathanda ukuthatha ukuphakama okugcwele kwewindi, ukuthambekela kwemvelo ukufaka ukuphakama: 100%; kuleso sici. Ngempela, uma ubeka ububanzi ububanzi: 100%; i-element izothatha isikhala esigcwele esiphezulu sekhasi, ngakho ukuphakama kufanele kusebenze okufanayo, kwesokudla? Ngeshwa, lokhu akunjalo neze.
Ukuqonda ukuthi kungani lokhu kwenzeka, kufanele uqonde ukuthi iziphequluli zihumusha ubude nobubanzi. Iziphequluli zeWebhu zibala ububanzi obutholakala njengendlela yokusebenzisa ukuthi iwindi lesiphequluli livuliwe kangakanani. Uma ungabeki amanani amancane emadokhumenti akho, isiphequluli sizogeleza ngokuzenzakalelayo okuqukethwe ukugcwalisa ububanzi befasitela (ububanzi be-100% buyinto ezenzakalelayo).
Inani lokuphakama libalwe ngokuhlukile kunobanzi. Eqinisweni, iziphequluli azihlolisisi ukuphakama nhlobo ngaphandle kokuthi okuqukethwe kude kakhulu kangangokuba kuphuma ngaphandle kwe-viewport (ngaleyo ndlela kudinga imigqa yokuphenya) noma uma umklami wewebhu ebeka ukuphakama okuphelele kwezinto ezisekhasini. Uma kungenjalo, isiphequluli simane nje sivumele okuqukethwe kugeleza ngaphakathi ububanzi be-viewport kuze kufike ekupheleni. Ukuphakama empeleni akubalwe nhlobo.
Izinkinga zenzeka uma usetha ukuphakama kwephesenti ku-element enezici zomzali ngaphandle kokubekwa kwezinto eziphakeme - ngamanye amazwi, izakhi zomzali zinokuphakama okuzenzakalelayo: auto; . Empeleni, ucela isiphequluli ukubala ukuphakama kusuka kunani elingaziwa. Njengoba lokho kungalingana nokungabi nhlobo, umphumela wukuthi isiphequluli asenzi lutho.
Uma ufuna ukusetha ukuphakama emakhasini akho ewebhu kumaphesenti, kufanele usethe ukuphakama kwazo zonke izici zomzali wale ofuna ukuthi ukuphakama kuchazwe. Ngamanye amazwi, uma unekhasi enjengale:
Okuqukethwe lapha
Cishe ufuna i-div nesigaba kuso ukuba kube nokuphakama okungu-100%, kodwa leyo div inebabili izakhi zomzali:
futhi. Ukuze uchaze ukuphakama kwe-div kuya ekuphakameni kwesihlobo, kufanele usethe ukuphakama komzimba nezakhi ze-html kanye.
Ngakho kuzodingeka usebenzise i-CSS ukusetha ukuphakama kwe-div kuphela, kodwa futhi nomzimba nezici ze-html. Lokhu kungaba yinselele, ngoba ungakwazi ngokushesha ukugandelelwa yizinto zonke ezibekwe ku-100% ukuphakama, kuphela ukufeza lo mphumela oyifunayo.
Ezinye Izinto Okumele Ziziqaphele Uma usebenza ne-100% Heights
Manje ukuthi ukwazi ukubeka ukuphakama kwezakhi zakho zekhasi kuya ku-100%, kungaba okuthakazelisayo ukuphuma futhi wenze lokho kuwo wonke amakhasi akho, kodwa kunezinto ezimbalwa okufanele uziqaphele:
- Amangqamuzana ne-padding bangangezela ibha yokuphenya lapho ungafuni khona. Enye yezinto ezicasula kakhulu engizitholile ngokusebenza ngamaphesenti (ububanzi) futhi yilokho okwenziwe khona kanye namagqabhezana kulezi zakhi ezifanayo kungangeza imigqa yokuphenya ekhasini, noma ngabe konke okuqukethwe kubonisa ngaphandle kokudinga imigqa yokupheqa. Lokhu kungenxa yokuthi ukuphakama noma ububanzi besici kuyinto yokuqala ebalwa. Khona-ke ama-margins nama-paddings ayengeziwe. Ngakho uma unesici esinokuphakama kwama-100% namaphesenti aphezulu nangaphezulu amaphikseli angu-10 ngamunye, kuyoba khona ibha yokuphenya yamaphikseli angaphezu kwangu-20. Khumbula, imodeli yebhokisi le-CSS ineza umkhawulo, umngcele, kanye ne-padding ngobukhulu besici, ngakho-ke i-100% nganoma yimaphi amanye amanani wemodeli ye-model izoba ngaphezulu kuka-100%.
- Uma okuqukethwe kwakho kuthatha okungaphezu kokuphakama okuchaziwe, kuzokwandisa noma yini ngemva kwayo. Ngamanye amazwi, uma uneklamo enekholomu eyi-80% ekuphakameni, futhi okuqukethwe okungaphakathi kuyo kuzothatha u-100% wokuphakama, ukuthi okungaphezulu kwe-20% kuzoqhubeka ngaphansi kwekholomu bese iphula umklamo obukwayo kwekhasi lakho. Uma kunokuqukethwe okungezansi kwekholomu, umbhalo uzobe ubhala ngaphezulu phezulu. Ngivame ukubona lokhu kwenzeka lapho umklami wewebhu ezama ukuphoqelela ukuphakama kwekhasi futhi uyisebenze ngokugcwele ukuqaliswa, kodwa uma okuqukethwe kulelo khasi kushintsha esikhathini esizayo, ukuphakama kwazo ngokuphelele kuphule ukugeleza kwekhasi. Lokhu kuyiqiniso ngempela uma udala amawebhusayithi aphendulayo obanzi bawo nokuphakama kumele kuguqulwe ngobukhulu be-viewport.
Ukulungisa lokhu, ungasetha ukuphakama kwesici futhi. Uma uyibeka ngokuzenzakalela, imingcele yokupheqa izovela uma idingeka kodwa iphela uma ingekho. Lokho kulungisa ukuphumula okubukwayo, kodwa kunezela imiqulu lapho ungase ungawafuni khona.
Usebenzisa ama-Viewport Units
Enye indlela ongayinqoba ngayo le nselele ukuzama ukuhlola i-CSS Viewport Units. Ngokusebenzisa i- unitport yokuphakama kweyunithi yokulinganisa, ungakwazi usayizi amakhi ukuze uthathe ukuphakama okuchaziwe kwe-viewport, futhi lokho kuzoshintsha njengoba i-viewport ishintsha! Lena yindlela enhle yokuthola ukubonakala kwakho kwe-100% ekugqibeleni ekhasini kepha kusenayo ukuthi iguquguquke kumadivayisi ahlukene namasayizi weskrini.