Ako použiť CSS na nastavenie výšky prvku HTML na 100 %

Zistite, ako funguje nastavenie výšky pomocou percent v CSS

Percentuálne hodnoty v CSS môže byť zložité. Keď nastavíte výšku Vlastnosť CSS prvku na 100 % čo presne ho nastavujete na 100 %? To je hlavná otázka, na ktorú narazíte pri práci s percentami v CSS, a keďže sa rozloženia stávajú zložitejšími, je oveľa ťažšie sledovať percentá, čo vedie k nejakému úplne bizarnému správaniu, ak si nedáte pozor.

Práca s percentami má výraznú výhodu; rozloženia založené na percentách sa automaticky prispôsobujú rôznym veľkostiam obrazovky. Preto je v responzívnom dizajne nevyhnutné používať percentá. Populárne mriežkové systémy a CSS rámce používajú percentuálne hodnoty na vytvorenie svojich responzívnych mriežok.

Je zrejmé, že existujú určité situácie vhodnejšie pre statické hodnoty a iné, ktoré fungujú oveľa lepšie s niečím adaptívnym, ako sú percentá. Budete sa musieť rozhodnúť, ktorou cestou sa vyberiete s prvkami vo svojom návrhu.

Statické jednotky

Pixely sú statické. Desať pixelov na jednom zariadení je desať pixelov na každom zariadení. Iste, existujú veci ako hustota a spôsob, akým zariadenie skutočne interpretuje, čo je pixel, ale nikdy neuvidíte veľké zmeny, pretože obrazovka má inú veľkosť.

Pomocou CSS môžete jednoducho definovať prvky výška v pixeloch , a zostane to rovnaké. Dá sa to predvídať.

|_+_|

To sa nezmení, pokiaľ to nezmeníte JavaScriptom alebo niečím podobným.

Teraz je tu druhá strana mince. Nezmení sa to. To znamená, že budete musieť všetko presne zmerať a aj tak váš web nebude fungovať na všetkých zariadeniach. To je dôvod, prečo statické jednotky zvyčajne fungujú lepšie pre detské prvky, médiá a veci, ktoré sa začnú skresľovať a vyzerať zvláštne, ak sa roztiahnu a zväčšia.

Nastavenie výšky prvku na 100 %

Keď nastavíte výšku prvku na 100 %, rozšíri sa na celú výšku obrazovky? Niekedy. CSS vždy zaobchádza s percentami ako s percentami nadradeného prvku.

Bez nadradeného prvku

Ak ste vytvorili čerstvú ktorý obsahuje iba značka tela vašej stránky, 100 % bude pravdepodobne zodpovedať výške obrazovky. To znamená, ak ste nedefinovali hodnotu výšky pre .

HTML:

|_+_|

CSS:

|_+_|

To výška prvku sa bude rovnať výške obrazovky. V predvolenom nastavení je pokrýva celú obrazovku, takže to je základ, ktorý váš prehliadač používa pri výpočte výšky prvku.

S nadradeným prvkom so statickou výškou

Keď je váš prvok vnorený do iného prvku, prehliadač použije výšku nadradeného prvku na výpočet hodnoty pre 100 %. Ak sa teda váš prvok nachádza v inom prvku, ktorý má výšku 100 pixelov, a výšku podriadeného prvku nastavíte na 100 %. Podradený prvok bude mať výšku 100 pixelov.

HTML:

|_+_|

CSS:

|_+_|

Výška dostupná pre podradený prvok je obmedzená výškou nadradeného prvku.

S nadradeným prvkom s percentuálnou výškou

Môže sa to zdať neintuitívne, ale výšku prvku môžete nastaviť na percento percent. Keď má prvok nadradený prvok, ktorý má svoju výšku definovanú aj ako percentuálnu hodnotu, prehliadač použije rovnakú hodnotu ako nadradený prvok, ktorú už vypočítal na základe svojho rodiča. Je to preto, že 100 % hodnoty je stále touto hodnotou.

|_+_|

CSS:

|_+_|

V tomto prípade je výška nadradeného prvku 75 % celej obrazovky. Dieťa má teda k dispozícii 100 % celkovej výšky.

S nadradeným prvkom bez výšky

Je zaujímavé, že keď nadradený prvok nemá definovanú výšku, prehliadač bude pokračovať úroveň po úrovni, kým nenájde konkrétnu hodnotu, s ktorou môže pracovať. Ak to dotiahne až do bez toho, aby ste niečo našli, prehliadač predvolene použije výšku obrazovky, čím váš prvok získa ekvivalentnú výšku.

HTML:

|_+_|

CSS:

|_+_|

Podradený prvok siaha až do hornej a dolnej časti obrazovky.

Jednotky výrezu

Pretože výpočet s percentuálnymi jednotkami môže byť zložitý a každý prvok je viazaný na svojho rodiča, existuje skupina jednotiek, ktoré ignorujú toto všetko a základné veľkosti prvkov priamo mimo dostupného priestoru na obrazovke. Toto sú jednotky výrezu a poskytujú vám priamu veľkosť na základe výšky alebo šírky obrazovky bez ohľadu na to, kde sa prvok nachádza.

Ak chcete nastaviť prvok výška rovná výške obrazovky, nastavte jej hodnotu výšky na 100vh .

|_+_|

Pri tomto je ľahké rozložiť rozloženie a musíte vedieť, ktoré ďalšie prvky budú ovplyvnené, ale výrez je zďaleka najpriamejším spôsobom, ako nastaviť výšku prvku na 100 % obrazovky.