Su'aalaha badanaa la waydiiyay ee naqshadda shabakada waa "sidee ayaad u dhejisaa dhererka 100%"?
Tani waxay u ekaan kartaa sidii jawaab sahlan. Waxaad si fudud u isticmaashaa CSS si aad u dhigno dhererka walxaha illaa 100%, laakiin tani mar walba ma dulsaarin walxahaas si ay u ekaadaan daaqada oo dhan. Aynu ogaanno sababta ay taasi u dhacdo iyo waxa aad sameyn kartid si aad u gaarto qaabkan muuqaalka ah.
Pixels iyo boqolkiiba
Markaad qeexdo dhererka elektarooniga adigoo isticmaalaya hantida CSS iyo qiimaha isticmaala pixels, elementku wuxuu ka qaadi doonaa meesha ugu badan ee tooska ah ee shabakada.
Tusaale ahaan, cutub dhererkiisu yahay: 100px; waxay qaadan doontaa 100 pixels oo ah meel bannaan oo muuqaal ah. Maqnaansho sida ugu weyn ee daaqadaada daaqadaada, sheygan wuxuu noqon doonaa 100 pixar dherer ahaan.
Boqolkiiba wuxuu ka shaqeeyaa si ka duwan pixels. Marka loo eego qeexitaanka W3C, dhererka boqolkiiba ayaa lagu xisaabiyaa iyadoo la tixgelinayo weelka weelka. Sidaas darteed haddii aad ku dhejiso weedh dherer leh: 50%; gudaha div oo leh height of 100px, cutubka noqon doonaa 50 pixels dherer, taas oo ah 50% ka mid ah element ee waalidka.
Waa maxay sababta dhererka boqolleyda
Haddii aad diyaargarowday websaydh, oo aad haysatid taxane aad jeceshahay in aad qaadatid dhererka daaqada oo dhan, dabeecadda dabiiciga ahi waa in lagu daro dherer: 100%; ujeedadaas. Ka dib oo dhan, haddii aad dhigto width si width: 100%; Xajmigu wuxuu qaadanayaa meedka buuxa ee bogga, sidaa daraadeed dhererku waa inuu isla shaqeeyaa, sax? Nasiib darro, tani ma ahan kiiska.
Si aad u fahanto sababta ay taasi u dhacdo, waa inaad fahamtaa sida daalacayaashu u fasirtaan dhererka iyo ballaca. Daraasadaha Webka waxay xisaabiyaan wadarta guud ee loo heli karo iyadoo loo eegayo sida ay u kala duwan yihiin daaqada browser-ka. Haddii aadan haysanin qiimaha ballaaran ee dukumiintiyadaada, browserku wuxuu si toos ah u socon doonaa waxyaabaha ku jira si uu u buuxiyo dhamaanba daaqada (100% width waa qadarka).
Qiimaha dhererka ayaa loo xisaabiyaa si ka duwan sida ballaaran. Dhab ahaantii, daalacayaashu ma qiimeyn karaan dhererka ilaa mawduuca uu yahay mid aad u dheer oo ka baxsan aragtida (sidaas awgeed u baahan tahay baararka baararka) ama haddii naqshadeeyaha webku uu dherer buuxa u yahay sheyga ku yaal bogga. Haddii kale, browserka ayaa si sahlan u oggolaanaya socodka nuxurkiisa gudaha ballaaran ee viewport illaa dhamaadka dhamaadka. Heerkuna dhab ahaan lama xisaabin.
Dhibaatooyinka waxay dhacaan markaad dhiso dherer boqolkiiba oo ka mid ah walxaha leh walxaha waalidka oo aan lahayn dherer dheraad ah - si kale haddii loo dhigo, walxaha waalidku waxay leeyihiin dherer ahaan default: auto; . Adigu, asalka ah, waxaad waydiisan kartaa browserka in uu xisaabiyo dhererka qiimaha aan qarsooneyn. Tan waxay taasi u dhigantaa mid qiimo go'an, natiijadu waa in browser uusan wax waxba qaban.
Haddii aad rabto in aad dhigno dhererka bogagga shabakadaada boqolkiiba, waa inaad sameysaa dhererka walal kasta ee waalidka ee aad rabto dhererka la qeexay. Si kale haddii loo dhigo, haddii aad heysato bog sidan oo kale ah:
Macluumaadka halkan
Waxaa laga yaabaa in aad rabto in div iyo cutubka ku jira in ay leeyihiin 100% dhererka, laakiin div ayaa dhab ahaantii leh laba walxood waalid:
iyo. Si loo qeexo dhererka sare ee cidhifyada dherer ahaan, waa inaad sameysaa dhererka jirka iyo html.
Sidaa darteed waxaad u baahan tahay inaad isticmaasho CSS si aad u dajiso dhererka ma aha oo kaliya div, laakiin sidoo kale walxaha jidhka iyo html. Tani waxay noqon kartaa caqabad, maaddaama aad si deg deg ah uga dheregsan tahay wax kasta oo lagu qiyaaso 100%, oo kaliya si loo gaaro saameyntii la rabay.
Waxyaabaha Loo Yaqaano Marka La Shaqeynayo 100% Heights
Hadda oo aad ogtahay sida aad u dhigno dhererka bogaggaaga bogga 100%, waxay noqon kartaa mid xiiso leh in aad dibedda u baxdo oo aad taas ku sameyso boggaga oo dhan, laakiin waxaa jira waxyaabo aad u baahan tahay in aad ka war hayso:
- Margins iyo ciriiri waxay ku dari karaan bararka xaglaha oo aanad rabin mid ka mid ah. Mid ka mid ah waxyaabihii ugu xumaa ee aan ka ogaaday in aan la shaqeynayo dhererka boqolleyda (iyo balaarinnada) waa markaa ka dibna cidhifka iyo xayeysiiska ku yaala kuwan la mid ah waxay ku dari kartaa baararka rogrogista bogga, inkastoo dhammaan waxyaabaha la soo bandhigo iyaga oo aan u baahneyn baararka xawaaraha. Tani waa sababta oo ah dhererka ama dhererka qaybta ayaa ah waxa ugu horreeya ee la xisaabiyo. Kadibna marmarka iyo cirbadaha ayaa lagu daray. Sidaas darteed haddii aad leedahay wax leh dherer ahaan 100% iyo sare iyo hoose ee 10 pixels kasta, waxaa jiri doona bar barbaro ah 20 pixel dheeraad ah. Xasuuso, qaabka CSS sanduuqa ku darsaday margin, xuduud, iyo ciriiri cabbirka cabbirka, sidaa darteed 100% mid kasta oo ka mid ah qiimayaasha tusaalayaasha kale ayaa dhab ahaantii noqon doona wax ka badan 100%.
- Haddii mawduucaagu uu ka badnaado dhererka la qeexay, waxuu ku dhajin doonaa wixii ka dambeeya. Si kale haddii loo dhigo, haddii aad haysato naqshad leh tiir oo ah 80% oo dherer ah, iyo waxyaabaha ku jira gudaha waxay qaadan doonaan 100% oo dherer ah, in dheeraad ah 20% ay sii socon doonaan hoosta ka dibna jebiyaan naqshadda muuqaalka ee boggaaga. Haddii uu jiro content ka hooseeya column, qoraalka ayaa si fudud u qori doona dusha sare. Inta badan waxaan arkayaa arrintani markay dhacdo marka naqshadeeyaha shabakadu isku dayayo in uu kuqoro dhererka bogga oo uu si fiican u shaqeynayo si bilaash ah, laakiin marka marxaladdan boggaas ay isbeddeleyso mustaqbalka, dherarkooda qumman ayaa gebi ahaan jebin doona socodka bogga. Tani waa laban laab markaad dhisto websiyo waxtar leh oo ballaaran oo dhererkoodu waa inuu isbeddelaa inta cabbirka aragtida.
Si aad taas u hagaajisid, waxaad dhigi kartaa dhererka isirka. Haddii aad u dhigto baabuur, baararka ayaa la arki doonaa haddii loo baahdo, laakiin way baaba'ayaan marka aanay ahayn. Taasi waxay hagaajineysaa nasashada muuqaalka, laakiin waxay ku dareysaa joornaalada meesha aanad doonaynin.
Isticmaalida Cutubyada Viewport
Hab kale oo aad wax uga qaban karto caqabadan waa inaad tijaabisid Cutubyada CSS Viewport. Adigoo isticmaalaya qaybta height of viewport ee cabbiraadda, waxaad awood u lahaan kartaa in aad qaadatid dherer la qeexay ee aragtida, taas oo isbeddelaysa sida aragtida isbeddelka! Tani waa hab weyn oo aad ku heli karto 100% dhererka muuqaalka ee bogga laakiin weli waxay u leeyihiin inay dabacsan yihiin qalabyo kala duwan iyo cabbiraadaha sawirka.