Ang usa ka sagad nga gipangutana nga pangutana sa disenyo sa website mao ang "giunsa nimo pagbutang ang gitas-on sa elemento ngadto sa 100%"?
Kini ingon og sayon nga tubag. Ikaw naggamit lamang sa CSS sa pagpahimutang sa gitas-on sa usa ka elemento ngadto sa 100%, apan kini dili kanunay nga pag-ayo nianang elemento nga mohaum sa tibuok nga window sa browser. Atong tan-awon kung nganong kini mahitabo ug unsa ang imong mahimo aron makab-ot kini nga estilo sa biswal.
Pixel ug Porsyento
Sa diha nga imong gipasabut ang gitas-on sa usa ka elemento gamit ang CSS property ug ang usa ka bili nga naggamit sa mga pixel, kana nga elemento magkuha nianang dako nga luna sa browser.
Pananglitan, usa ka parapo nga adunay gitas-on: 100px; moabut ang 100 ka pixel nga vertical nga luna sa imong desinyo. Dili igsapayan kon unsa ka dako ang imong browser window, kini nga elemento mahimong 100 ka pixel ang gitas-on.
Ang mga porsyento sa trabaho lahi kay sa pixel. Sumala sa detalye sa W3C, ang gidaghanon sa taas nga gibanabana kalabot sa gitas-on sa sudlanan. Busa kung imong gibutang ang usa ka parapo nga adunay gitas-on: 50%; sa sulod sang div nga may kataason nga 100px, ang parapo amo ang 50 ka pixel ang kataason, nga amo ang 50% sang elemento sang ginikanan.
Nganong Lisod ang Porsyento
Kung nagdisenyo ka sa usa ka webpage, ug ikaw adunay usa ka kolum nga gusto nimo nga makuha ang bug-os nga bintana, ang natural nga hilig mao ang pagdugang sa usa ka gitas-on: 100%; niana nga elemento. Hinoon, kon imong ibutang ang gilapdon nga gilapdon: 100%; ang elemento magkuha sa hingpit nga pinahigda nga luna sa panid, mao nga ang gitas-on kinahanglan nga magabuhat sa sama, husto ba? Ikasubo, dili kini ang kaso.
Aron masabtan kon nganong kini mahitabo, kinahanglan nga imong masabtan kon giunsa sa kahulogan sa mga browsers ang kahulogan sa taas ug lapad Ang mga web browser nagkalkula sa total nga anaa nga lapad isip usa ka katuyoan kon unsa ka lapad ang bintana sa browser nga giablihan. Kon dili mo ibutang ang bisan unsang gilay-on nga mga bili sa imong mga dokumento, ang browser awtomatikong modagayday sa mga sulod aron mapuno ang tibuok gilapdon sa bintana (100% ang gilapdon mao ang default).
Ang gitas-on sa gitas-on gikalkula nga lahi kay sa lapad Sa pagkatinuod, ang mga browser wala mag-usisa sa gitas-on gawas kung ang sulod taas kaayo nga kini mogawas sa viewport (sa ingon nagkinahanglan sa mga scroll bar) o kung ang tigdisenyo sa web adunay taas nga gitas-on alang sa elemento sa panid. Kay kon dili, ang browser nag-abli sa sulod sa sulod sa gilapdon sa viewport hangtud nga kini moabut sa katapusan. Ang gitas-on sa pagkatinuod dili gayud kalkulado.
Ang mga suliran mahitabo sa dihang maghimo ka usa ka porsyento nga gitas-on sa usa ka elemento nga adunay mga elemento sa ginikanan nga walay gibutang nga tuhod - sa lain nga mga pulong, ang ginikanan nga mga elemento adunay default nga taas: auto; . Sa pagkatinuod, ikaw nangutana sa browser sa pagkalkulo sa usa ka gitas-on gikan sa usa ka dili tino nga bili. Tungod kay kini managsama nga usa ka null-value, ang resulta mao nga ang browser walay ginabuhat.
Kung gusto nimo nga ibutang ang usa ka gitas-on sa imong mga web page ngadto sa usa ka porsyento, kinahanglan nga imong ibutang ang gitas-on sa matag ginikanan nga elemento sa usa nga gusto nimo ang gitas-on nga gihubad. Sa laing pagkasulti, kon ikaw adunay usa ka pahina nga sama niini:
Kontento dinhi
Mahimo nga gusto nimo nga ang div ug ang parapo niini adunay 100% nga gitas-on, apan ang div adunay tinuod nga duha ka elemento sa ginikanan:
ug. Aron mahibal-an ang gitas-on sa div ngadto sa usa ka relatibong gitas-on, kinahanglan mo ibutang ang gitas-on sa lawas ug html nga mga elemento usab.
Busa kinahanglan nimo nga gamiton ang CSS aron ibutang ang gitas-on sa dili lamang ang div, apan usab ang lawas ug html nga mga elemento. Mahimo kini nga usa ka hagit, tungod kay dali ka madala sa tanang butang nga gibutang sa 100% nga gitas-on, aron makab-ot kini nga gitinguha nga epekto.
Pipila ka mga Butang nga Mamatikdan Sa Pagtrabaho kauban ang 100% Heights
Karon nga nahibal-an nimo kung unsaon nga ibutang ang gitas-on sa imong mga elemento sa panid ngadto sa 100%, makalipay nga mogawas ug buhaton kana sa tanan nimong mga panid, apan adunay pipila ka mga butang nga angay nimong mahibal-an:
- Ang mga margin ug padding makadugang sa usa ka scroll bar diin dili nimo gusto ang usa. Usa sa labing makalagot nga mga butang nga akong nakit-an nga nagtrabaho uban ang porsiyento nga taas (ug gilapdon) mao nga ang padding ug mga margin sa susama nga mga elemento makadugang sa mga scroll bar ngadto sa panid, bisan kung ang tanan nga sulod nagpakita nga wala'y gikinahanglan nga scroll bar. Kini tungod kay ang gitas-on o gilapdon sa elemento mao ang unang butang nga gikalkula. Dayon ang mga daplin ug mga paddings idugang. Busa kung adunay usa ka elemento nga may gitas-on nga 100% ug sa ibabaw ug ubos nga mga margin sa 10 ka pixel matag usa, adunay usa ka scroll bar alang sa sobra nga 20 ka pixel. Hinumdomi, ang CSS box model nagdugang sa margin, border, ug padding ngadto sa gidak-on sa usa ka elemento, mao nga ang 100% uban sa bisan kinsa sa uban nga mga kahon sa modelo nga mga modelo sa pagkatinuod labaw pa kay sa 100%.
- Kon ang imong sulod labaw pa sa gitakda nga gitas-on, kini mag-overwrite sa bisan unsa human niini. Sa laing pagkasulti, kung dunay usa ka disenyo nga adunay usa ka kolum nga 80% ang gitas-on, ug ang sulod nga sulod niini mogunit sa 100% sa gitas-on, nga ang sobra 20% magpadayon ubos sa kolum ug mabuak ang visual design sa imong panid. Kung adunay sulod sa ubos nga kolum, ang teksto magsulat lamang sa ibabaw niini. Kanunay kong makita nga kini mahitabo kung ang usa ka tigdisenyo sa web mosulay sa pagpataas sa usa ka panid ug magamit kini sa hingpit nga paglihok alang sa paglansad, apan sa diha nga ang sulod sa maong panid mausab sa umaabot, ang ilang hingpit nga kahitas-an hingpit nga maguba ang agianan sa panid. Kini dobleng tinuod kung ikaw nagatukod og mga responsive nga mga website nga ang gilapdon ug gitas-on kinahanglan nga mag-usab sa gidak-on sa viewport.
Aron ayuhon kini, mahimo nimong ibutang ang gitas-on sa elemento ingon man. Kon ibutang nimo kini sa awto, ang mga scroll bar makita kung kini gikinahanglan apan mawala kung dili. Kana nag-ayo sa biswal nga pahulay, apan kini nagdugang sa scrollbars nga dili nimo gusto niini.
Paggamit sa Viewport Units
Ang laing paagi nga imong masulbad ang hagit mao ang pag-eksperimento sa CSS Viewport Units. Pinaagi sa paggamit sa gitas-on sa viewport nga gitas-on sa sukod, mahimo nimo ang gidak-on nga mga elemento sa paghimo sa usa ka gihan-ay nga gitas-on sa viewport, ug kana mausab samtang mag-usab ang viewport! Kini usa ka maayong paagi sa pagkuha sa imong 100% height visuals sa usa ka panid apan sa gihapon kini mahimo nga magamit alang sa lainlaing mga himan ug mga gidak-on sa screen.