Obvyklá otázka v návrhu webových stránek je "jak nastavíte výšku prvku na 100%"?
To se může zdát snadná odpověď. Jednoduše použijte CSS pro nastavení výšky prvku na 100%, ale to není vždy roztažení tohoto prvku, aby se vešly do celého okna prohlížeče. Zjistěte, proč se to stane a co můžete udělat pro dosažení tohoto vizuálního stylu.
Pixelů a procent
Když definujete výšku prvku pomocí vlastností CSS a hodnotu, která používá pixely, bude tento element v prohlížeči převzít tolik vertikálního prostoru.
Například odstavce s výškou: 100px; bude mít ve vašem designu 100 pixelů svislého prostoru. Nezáleží na tom, jak větší je vaše okno prohlížeče, bude tento prvek mít výšku 100 pixelů.
Procenta pracují jinak než pixely. Podle specifikace W3C se procentní výšky vypočítají vzhledem k výšce kontejneru. Takže pokud vložíte bod s výškou: 50%; uvnitř divů s výškou 100 pixelů, bude odstavec 50 pixelů na výšku, což je 50% jejího rodičovského prvku.
Proč procentní výšky selhávají
Pokud navrhujete webovou stránku a máte sloupec, který by chtěl získat celou výšku okna, je přirozeným sklonem přidat výšku: 100%; k tomuto prvku. Koneckonců, pokud nastavíte šířku na šířku: 100%; element bude mít celý horizontální prostor stránky, takže výška by měla fungovat stejně, ne? Bohužel tomu tak není vůbec.
Chcete-li pochopit, proč k tomu dojde, musíte pochopit, jak prohlížeče interpretují výšku a šířku. Webové prohlížeče vypočítávají celkovou šířku, která je k dispozici, v závislosti na tom, jak je otevřeno okno prohlížeče. Pokud v dokumentech nenastavíte žádné hodnoty šířky, prohlížeč bude automaticky přenášet obsah tak, aby vyplnil celou šířku okna (výchozí hodnota je 100% šířka).
Výšková hodnota se vypočítá jinak než šířka. Ve skutečnosti prohlížeče nevyhodnocují výšku vůbec, pokud obsah není tak dlouhý, že jde mimo výhled (tedy vyžaduje posuvníky) nebo pokud webový návrhář nastaví absolutní výšku prvku na stránce. V opačném případě prohlížeč jednoduše povolí, aby se obsah zobrazoval v šířce výřezu až do konce. Výška není vůbec vypočtena.
Problémy nastávají, když nastavíte procentuální výšku na prvek, který má nadřazené prvky bez nastavení výšky - jinými slovy, nadřazené prvky mají výchozí výšku: auto; . Vy požadujete, aby prohlížeč vypočítal výšku z nedefinované hodnoty. Protože by se to rovnalo nulové hodnotě, výsledkem je, že prohlížeč nic nedělá.
Chcete-li na svých stránkách nastavit výšku na procento, musíte nastavit výšku každého nadřazeného prvku, který chcete definovat výšku. Jinými slovy, pokud máte takovou stránku:
Obsah zde
Pravděpodobně budete chtít div a odstavce v ní mít 100% výšky, ale že div vlastně má dva základní prvky:
a. Chcete-li definovat výšku divu k relativní výšce, musíte také nastavit výšku těla a prvků html.
Takže budete muset použít CSS pro nastavení výšky nejen divu, ale i těla a html prvků. To může být výzva, protože se můžete rychle přemoci tím, že vše je nastaveno na 100% výšky, pouze abyste dosáhli tohoto požadovaného efektu.
Některé věci, které je třeba poznamenat při práci se 100% výšky
Nyní, když víte, jak nastavit výšku prvků stránky na 100%, může být zajímavé jít ven a udělat to na všechny vaše stránky, ale existuje několik věcí, které byste měli vědět:
- Okraje a polstrování mohou přidat posuvník, na kterém nechcete. Jedna z nejvíce otravných věcí, které jsem zjistil při práci s procentními výškami (a šířkami), je, že polstrování a okraje na těch stejných prvcích mohou přidat stránky posuvníku, a to i přesto, že se celý obsah zobrazuje bez použití posuvníků. Je to proto, že je nejprve vypočtena výška nebo šířka prvku. Potom jsou přidány okraje a paddings. Takže pokud máte prvek o výšce 100% a horní a dolní okraje o velikosti 10 pixelů, bude pro další 20 pixelů posuvník. Nezapomeňte, že model CSS box přidává na velikost prvku okraj, okraj a polstrování, takže 100% s jakoukoliv jinou hodnotou modelu boxu bude ve skutečnosti více než 100%.
- Pokud váš obsah zabere více než definovaná výška, přepsá vše po něm. Jinými slovy, pokud máte design se sloupcem o výšce 80% a obsah, který je uvnitř, bude mít až 100% výšky, další 20% bude pokračovat pod sloupcem a přeruší vizuální design stránky. Pokud je pod tímto sloupcem obsah, text se jednoduše zapíše nad jeho vrchol. Často vidím, že se to stalo, když se webový designér pokouší vynutit výšku stránky a dokáže ji dokonale fungovat pro spuštění, ale když se obsah na této stránce změní v budoucnu, jejich absolutní výšky úplně naruší tok stránky. To platí dvojnásobně při vytváření citlivých webových stránek, jejichž šířka a výška se musí měnit podle velikosti výřezu.
Chcete-li to vyřešit, můžete také nastavit výšku prvku. Pokud ji nastavíte na automatické, zobrazí se posuvníky, pokud jsou potřebné, ale zmizí, pokud nejsou. To opraví vizuální zlom, ale přidává posuvníky, kde je možná nebudete chtít.
Použití jednotek Viewportu
Dalším způsobem, jak se vypořádat s touto výzvou, je experimentovat s jednotkami CSS Viewport. Použitím jednotky výšky výřezu můžete měnit prvky tak, aby bylo dosaženo definované výšky výřezu a změní se při změně výřezu! Jedná se o skvělý způsob, jak získat na stránce 100% výšku vizuálních stránek, ale stále je flexibilní pro různá zařízení a velikosti obrazovky.