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ýškou: 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ýškou: 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.
Prečo nedosiahne percentá výšky
Ak navrhujete webovú stránku a máte stĺpec, ktorý by ste chceli vyzdvihnúť celú výšku okna, prirodzeným sklonom je pridať výšku: 100%; k tomuto prvku. Nakoniec, ak nastavíte šírku na šírku: 100%; prvok zaberie celý horizontálny priestor stránky, takže výška by mala fungovať rovnako, že? 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. Ak v dokumentoch nenastavíte žiadne hodnoty šírky, prehliadač automaticky pretečie obsah tak, aby vyplnil celú šírku okna (predvolená je 100% šírka).
Výška je vypočítaná rozdielne ako šírka. Prehliadače vôbec nehodnotia výšku, pokiaľ nie je obsah taký dlhý, že ide mimo obrazovku (teda vyžaduje posúvaciu lištu), alebo ak webový návrhár nastaví absolútnu výšku prvku na stránke. 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 - inými slovami, nadradené prvky majú predvolenú výšku: 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 nastaviť výšku vašich webových stránok na určité percento, musíte nastaviť výšku každého nadradeného prvku, ktorý chcete definovať výšku. Inými slovami, ak máte podobnú stránku:
Obsah tu
Pravdepodobne budete chcieť div a odsek v ňom mať 100% výšky, ale že div skutočne má dva základné elementy:
a. Aby ste definovali výšku div na relatívnu výšku, musíte nastaviť aj výšku tela a html elementov.
Takže budete musieť použiť CSS na nastavenie výšky nielen div, ale aj telo a html prvky. 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.
Niektoré veci si všimnite pri práci so 100% výškami
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ť:
- Okraje a polstrovanie môžu pridať posúvač, na ktorom nechcete. Jedna z najviac nepríjemných vecí, ktoré som zistil pri práci s percentami výšky (a šírkou) je, že polstrovanie a okraje na tých istých prvkoch môžu pridať posúvače na stránku, aj keď sa celý obsah zobrazuje bez toho, aby ste potrebovali posúvače. Je to preto, že výška alebo šírka prvku je prvou vecou, ktorá sa vypočíta. Potom sa pridajú okraje a paddings. Takže ak máte prvok s výškou 100% a horný a dolný okraj 10 pixelov každý, bude existovať posuvník pre ďalších 20 pixelov. Pamätajte si, že model CSS box pridá okraj, okraj a polstrovanie na veľkosť prvku, takže 100% s akoukoľvek inou hodnotou modelu boxu bude skutočne viac ako 100%.
- Ak váš obsah zaberie viac ako je definovaná výška, potom po nej všetko prepíše. Inými slovami, ak máte dizajn so stĺpcom s výškou 80% a obsah, ktorý je vnútri, zaberie 100% výšky, ďalšie 20% bude pokračovať pod stĺpcom a zlomí vizuálny dizajn vašej stránky. Ak je obsah pod týmto stĺpcom, text sa jednoducho zapíše nad jeho vrchol. Často vidím, že sa to stalo, keď sa webový dizajnér pokúša vynútiť výšku stránky a dokáže ju dokonale fungovať na spustenie, ale keď sa obsah na tejto stránke mení v budúcnosti, ich absolútne výšky úplne prerušia tok stránky. Toto je dvojnásobné pravidlo, keď vytvárate citlivé webové stránky, ktorých šírka a výška sa musia meniť s veľkosťou výrezu.
Ak to chcete opraviť, môžete tiež nastaviť výšku prvku. Ak ho nastavíte na automatické, v prípade potreby budú zobrazené posúvacie panely, ktoré však zmiznú, ak nie sú. To určuje vizuálnu prestávku, ale pridá posúvače, na ktoré ich možno nebudete chcieť.
Použitie jednotiek vo formáte Viewport
Ď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.