Najčastejšou otázkou v návrhu webových stránok je "Ako nastavíte výšku prvku na 100%"?
To sa môže zdať ako jednoduchá odpoveď. Jednoducho používate CSS na nastavenie výšky prvku na 100%, ale to nie vždy roztiahne tento prvok, aby sa zmestil do celého okna prehliadača. Zistíme, prečo sa to stane a čo môžete urobiť, aby ste dosiahli tento vizuálny štýl.
Pixelov a percent
Keď definujete výšku prvku pomocou funkcie CSS a hodnotu, ktorá používa pixely, tento prvok zaberie toľko vertikálneho priestoru v prehliadači. Napríklad odsek s
výška: 100px;
bude mať vo vašom dizajne 100 pixelov vertikálneho priestoru. Nezáleží na tom, ako väčšie je vaše okno prehliadača, tento prvok bude mať výšku 100 pixlov. Percentá pracujú inak ako pixely. Podľa špecifikácie W3C sa percentuálne výšky vypočítavajú vzhľadom na výšku kontajnera. Takže ak vložíte odsek s výška: 50%;
vo vnútri divu s výškou 100 pixlov bude odsek 50 pixlov na výšku, čo je 50% jeho rodičovského elementu. Ak navrhujete webovú stránku a máte stĺpec, ktorý by ste chceli vyzdvihnúť celú výšku okna, prirodzeným sklonom je pridanie výška: 100%;
k tomuto prvku. Koniec koncov, ak nastavíte šírka
na šírka: 100%;
prvok zaberie celý horizontálny priestor stránky, takže výška
by mali fungovať rovnako, nie? Bohužiaľ, vôbec to nie je. Ak chcete pochopiť, prečo k tomu dôjde, musíte pochopiť, ako prehliadače interpretujú výšku a šírku. Webové prehliadače vypočítavajú celkovú dostupnú šírku v závislosti od toho, ako otvorené je okno prehliadača. šírka
Ak v dokumentoch nenastavíte žiadne hodnoty, prehliadač automaticky pretečie obsah tak, aby vyplnil celú šírku okna (predvolená je šírka 100%). Výška je vypočítaná inak ako šírka. V skutočnosti prehliadače nevyhodnocujú výšku, pokiaľ nie je obsah taký dlhý, že ide mimo pohľad (čo si vyžaduje posúvače) alebo ak webový návrhár nastaví absolútnu hodnotu pre prvok na stránke. výška
V opačnom prípade prehliadač jednoducho umožňuje, aby obsah prechádzal v rámci šírky výrezu až do konca. Výška nie je v skutočnosti vôbec vypočítaná. Problémy sa vyskytujú, keď nastavíte percentuálnu výšku na prvok, ktorý má nadradené prvky bez výšok nastavené - inými slovami, materské prvky majú predvolené. výška: auto;
V skutočnosti žiadate prehliadač, aby vypočítal výšku z nedefinovanej hodnoty. Keďže toto by sa rovnalo nulovej hodnote, výsledkom je, že prehliadač nerobí nič. Ak chcete na svojich webových stránkach nastaviť výšku percenta, musíte nastaviť výšku každý rodičovský prvok, ktorý chcete definovať výšku. Inými slovami, ak máte podobnú stránku: Obsah tu
Pravdepodobne budete chcieť div
a odsek v ňom má 100% výšku, ale to skutočne má dva základné prvky: a. S cieľom definovať výšku div
do relatívnej výšky, musíte nastaviť výšku telo
a html
aj prvky. Takže budete musieť použiť CSS na nastavenie výšky nielen div, ale aj telo a prvky HTML. To môže byť výzvou, pretože môžete rýchlo prekonať všetko, čo je nastavené na 100% výšky, len aby ste dosiahli tento požadovaný účinok. Teraz, keď viete, ako nastaviť výšku prvkov vašej stránky na 100%, môže byť vzrušujúce ísť von a urobiť to na všetkých vašich stránkach, ale existuje niekoľko vecí, ktoré by ste mali vedieť: Ak to chcete opraviť, môžete tiež nastaviť výšku prvku. Ak ho nastavíte auto,
posúvacie panely sa objavia, ak sú potrebné, ale zmizne, ak nie sú.To určuje vizuálnu prestávku, ale pridá posúvače, na ktoré ich možno nebudete chcieť. Ďalším spôsobom, ako môžete vyriešiť túto výzvu, je experimentovať s jednotkami CSS Viewport. Použitím jednotky zobrazenia výšky zobrazenia môžete mať veľkosť prvkov na zachytenie definovanej výšky výrezu a to sa zmení pri zmene výrezu! Je to skvelý spôsob, ako získať svoju vizuálnu stránku o výške 100% na stránke, ale stále je flexibilná pre rôzne zariadenia a veľkosti obrazovky. Prečo nedosiahne percentá výšky
Niektoré veci si všimnite pri práci so 100% výškami
Použitie jednotiek vo formáte Viewport
