Jak nastavit výšku prvku HTML na 100%

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ýška: 100px;

bude mít ve vašem designu až 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 odstavec s

výška: 50%;
uvnitř dělení s výškou 100 pixelů, bude odstavec 50 pixelů na výšku, což je 50% jejího nadřazené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ýška: 100%;
k tomuto prvku. Koneckonců, pokud nastavíte

šířka
na

šířka: 100%;
element bude obsazovat celý horizontální prostor stránky, takže

výška
by měly 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.

šířka
Pokud v dokumentech nenastavíte žádnou hodnotu, 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. Prohlížeče ve skutečnosti 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í hodnotu prvku na stránce.

výška
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, výchozí prvky mají výchozí hodnotu.

výška: 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 nastavit výšku na webových stránkách na procento, musíte nastavit výšku každý který chcete definovat výšku. Jinými slovy, pokud máte takovou stránku:

Obsah zde
Pravděpodobně budete chtít

div
a odstavec v něm mít 100% výšky, ale to vlastně má dva nadřazené prvky:

a. Pro určení výšky

div
do relativní výšky musíte nastavit výšku

tělo
a

html
i prvky. Takže budete muset použít CSS pro nastavení výšky nejen elementu div, ale také těla a HTML. 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í, kterou 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řidávat posuvníky na stránku, 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 opravit, můžete také nastavit výšku prvku. Pokud jej nastavíte

auto,
objeví se scrollbars, pokud jsou zapotřebí, 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.