Ang karaniwang tanong sa disenyo ng website ay "paano mo itinatakda ang taas ng isang elemento hanggang 100%"?
Ito ay maaaring tila isang madaling sagot. Ginagamit mo lamang ang CSS upang itakda ang taas ng isang elemento sa 100%, ngunit hindi ito palaging nakakaapekto sa elementong iyon upang magkasya sa buong window ng browser. Alamin kung bakit ito nangyayari at kung ano ang maaari mong gawin upang makamit ang visual na estilo.
Mga Pixel at Mga Porsyento
Kapag tinutukoy mo ang taas ng isang elemento gamit ang property ng CSS at isang halaga na gumagamit ng mga pixel, ang sangkap na iyon ay kukuha ng maraming espasyo sa browser.
Halimbawa, isang talata na may taas: 100px; ay kukuha ng 100 pixel ng vertical space sa iyong disenyo. Hindi mahalaga kung gaano ang iyong browser window, ang elementong ito ay 100 pixel na taas.
Ang mga porsyento ay gumagana nang iba kaysa sa mga pixel. Ayon sa detalye ng W3C, ang mga porsyento ng taas ay kinakalkula alinsunod sa taas ng lalagyan. Kaya kung maglagay ka ng isang talata na may taas na: 50%; sa loob ng div na may taas na 100px, ang talata ay 50 pixel na taas, na kung saan ay 50% ng elemento ng magulang nito.
Bakit Hindi Mahalaga ang Porsyento ng Heights
Kung nagdidisenyo ka ng isang webpage, at mayroon kang haligi na nais mong kunin ang buong taas ng window, ang likas na pagkahilig ay magdagdag ng taas: 100%; sa sangkap na iyon. Pagkatapos ng lahat, kung itinakda mo ang lapad sa lapad: 100%; ang elemento ay kukuha ng buong pahalang na espasyo ng pahina, kaya ang taas ay dapat gumana nang pareho, tama? Sa kasamaang palad, hindi ito ang kaso.
Upang maunawaan kung bakit ito nangyayari, dapat mong maunawaan kung paano binibigyang kahulugan ng mga browser ang taas at lapad. Kalkulahin ng mga web browser ang kabuuang magagamit na lapad bilang isang function ng kung gaano kalaki ang window ng browser ay binuksan. Kung hindi mo itatakda ang anumang mga halaga ng lapad sa iyong mga dokumento, awtomatikong dadaloy ng browser ang mga nilalaman upang punan ang buong lapad ng window (100% lapad ang default).
Ang halaga ng taas ay kinakalkula nang iba kaysa lapad. Sa katunayan, ang mga browser ay hindi sinusuri ang taas sa lahat maliban kung napakahaba ang nilalaman na lumalabas sa labas ng viewport (kaya nangangailangan ng mga scroll bar) o kung ang taga-disenyo ng web ay nagtatakda ng isang ganap na taas para sa isang elemento sa pahina. Kung hindi man, pinapayagan lamang ng browser ang daloy ng nilalaman sa loob ng lapad ng viewport hanggang sa katapusan. Ang taas ay hindi talaga kinakalkula sa lahat.
Ang mga problema ay nangyayari kapag nagtatakda ka ng taas na porsyento sa isang elemento na may mga elemento ng magulang na hindi nakatakda sa taas - sa ibang salita, ang mga elemento ng magulang ay may default na taas: auto; . Sa katunayan, ikaw ay humihiling sa browser na kalkulahin ang taas mula sa isang hindi natukoy na halaga. Dahil iyon ay pantay-pantay na null-value, ang resulta ay ang browser ay walang ginagawa.
Kung gusto mong magtakda ng isang taas sa iyong mga web page sa isang porsyento, kailangan mong itakda ang taas ng bawat elemento ng magulang ng isang nais mo ang taas na tinukoy. Sa madaling salita, kung mayroon kang isang pahinang ganito:
Nilalaman dito
Malamang na gusto mo ang div at ang talata dito na magkaroon ng 100% na taas, ngunit ang div ay talagang may dalawang elemento ng magulang:
at. Upang tukuyin ang taas ng div sa kamag-anak na taas, dapat mong itakda ang taas ng katawan at html elemento pati na rin.
Kaya kailangan mong gumamit ng CSS upang itakda ang taas ng hindi lamang ang div, kundi pati na rin ang katawan at html elemento. Ito ay maaaring maging isang hamon, dahil maaari mong mabilis na makakuha ng nalulula sa lahat ng bagay na naka-set sa 100% taas, lamang upang makamit ang nais na epekto.
Ang ilang mga Bagay na Tandaan Kapag Paggawa gamit ang 100% Heights
Ngayon na alam mo kung paano itakda ang taas ng iyong mga elemento ng pahina sa 100%, maaari itong maging kapana-panabik na lumabas at gawin iyon sa lahat ng iyong mga pahina, ngunit may ilang mga bagay na dapat mong malaman:
- Ang mga margin at padding ay maaaring magdagdag ng scroll bar kung saan hindi mo nais ang isa. Ang isa sa mga pinaka nakakainis na bagay na nakita ko sa pagtatrabaho sa mga taas ng porsyento (at lapad) ay ang pagkatapos ay ang padding at mga margin sa mga parehong elemento ay maaaring magdagdag ng mga scroll bar sa pahina, kahit na ang lahat ng nilalaman ay nagpapakita nang hindi nangangailangan ng mga scroll bar. Ito ay dahil ang taas o lapad ng elemento ay ang unang bagay na kinakalkula. Pagkatapos ay idinagdag ang mga margin at paddings. Kaya't kung mayroon kang isang elemento na may taas na 100% at itaas at ilalim na mga gilid ng 10 pixel bawat isa, magkakaroon ng scroll bar para sa dagdag na 20 pixel. Tandaan, ang modelo ng kahon ng CSS ay nagdaragdag ng margin, border, at padding papunta sa sukat ng isang elemento, kaya 100% sa alinman sa mga iba pang mga halaga ng modelo ng kahon ay talagang magiging higit sa 100%.
- Kung ang iyong nilalaman ay tumatagal ng higit pa kaysa sa tinukoy na taas, ito ay patungan ang anumang bagay pagkatapos nito. Sa ibang salita, kung mayroon kang isang disenyo na may haligi na 80% sa taas, at ang nilalaman na nasa loob nito ay kukuha ng 100% ng taas, na ang dagdag na 20% ay magpapatuloy sa ibaba ng haligi at masira ang visual na disenyo ng iyong pahina. Kung mayroong nilalaman sa hanay na iyon, ang teksto ay magsusulat lamang sa itaas nito. Madalas kong makita na ito ay nangyayari kapag ang isang taga-disenyo ng web ay sinusubukan na pilitin ang taas ng isang pahina at ito ay gumagana nang perpekto para sa paglunsad, ngunit kapag ang nilalaman sa pahinang iyon ay nagbabago sa hinaharap, ang kanilang mga ganap na taas ay ganap na masira ang daloy ng pahina. Doble ito nang totoo kapag nagtatayo ka ng mga website na tumutugon na dapat baguhin ng lapad at taas sa laki ng viewport.
Upang ayusin ito, maaari mong itakda ang taas ng elemento pati na rin. Kung itatakda mo ito sa auto, ang mga scroll bar ay lilitaw kung kinakailangan ang mga ito ngunit nawawala kapag hindi sila. Inaayos nito ang visual break, ngunit nagdadagdag ito ng scrollbars kung saan hindi mo maaaring gusto ang mga ito.
Paggamit ng Mga Yunit ng Viewport
Ang isa pang paraan na maaari mong harapin ang hamon na ito ay mag-eksperimento sa mga CSS Viewport Units. Sa pamamagitan ng paggamit ng yunit ng taas ng viewport ng pagsukat, maaari mong sangkap ng mga elemento na tumagal ng isang tinukoy na taas ng viewport, at magbabago ito bilang pagbabago ng viewport! Ito ay isang mahusay na paraan upang makuha ang iyong 100% taas visuals sa isang pahina ngunit pa rin ang mga ito ay nababaluktot para sa iba't ibang mga aparato at laki ng screen.