Paano Itakda ang Taas ng isang HTML Element sa 100%

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, ang isang talata na may

taas: 100px;

ay kukuha ng 100 pixel ng vertical space sa iyong disenyo. Hindi mahalaga kung gaano kalaki ang window ng iyong browser, ang elementong ito ay magiging 100 na 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: 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 ikaw ay nagdidisenyo ng isang webpage, at mayroon kang hanay na nais mong kunin ang buong taas ng window, ang natural na hilig ay magdaragdag ng isang

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 puwang ng pahina, kaya

taas
ay dapat na gumana ang parehong, 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.

lapad
Kung hindi mo itatakda ang anumang mga halaga 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 ang nilalaman ay masyadong mahaba na lumalabas sa labas ng viewport (kaya nangangailangan ng scroll bar) o kung ang web designer ay nagtatakda ng isang ganap para sa isang elemento sa pahina.

taas
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 ibang salita, ang mga elemento ng magulang ay may default.

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 nais mong magtakda ng isang taas sa iyong mga web page sa isang porsyento, kailangan mong itakda ang taas ng bawat magulang elemento ng isa na gusto 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 ay may taas na 100%, ngunit ang div ay talagang may dalawa elemento ng magulang:

at. Upang tukuyin ang taas ng

div
sa isang kamag-anak na taas, dapat mong itakda ang taas ng

katawan
at

html
mga sangkap rin. Kaya kailangan mong gumamit ng CSS upang itakda ang taas ng hindi lamang ang div kundi pati na rin ang katawan at mga elemento ng HTML. 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 nagtatrabaho sa taas na 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 scrollbars. 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 itinakda mo ito

auto,
Ang scrollbars 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.