Jak vytvořit tělo na celou obrazovku pomocí CSS

Když vytváříme webovou stránku, jedním z nejdůležitějších úkolů je vytvořit strukturu stránky a její vzhled. Webové stránky se obvykle skládají z několika sekcí, jako je název, hlavní obsah a suterén. A samozřejmě chceme, aby všechny prvky stránky byly dobře viditelné a zabíraly celou dostupnou plochu obrazovky.

Jednou z cest, jak toho všeho dosáhnout, je použít CSS k zadání velikostí prvků stránky. Základní položkou, kterou chceme naplnit všemi dostupnými místy, je body, který představuje hlavní obsah webové stránky. Můžeme nastavit výšku a šířku tohoto prvku na 100%, aby zaplnil celou obrazovku.

K tomu můžeme použít následující kód:

body

Tento kód v CSS nastavuje výšku a šířku body ve 100% a také nastavuje odsazení a odsazení uvnitř prvku na 0. Takovým způsobem, body bude zabírat veškerý dostupný prostor na obrazovce, bez odsazení a odsazení.

Protažení těla na celou obrazovku CSS

Chcete-li protáhnout prvek těla na celou obrazovku pomocí CSS, můžete použít následující kód:

body margin: 0;
padding: 0;
height: 100vh;
>

V tomto kódu nastavíme nulové hodnoty pro odsazení a pole těla, abychom se vyhnuli zbytečnému prostoru. Poté pomocí vlastnosti height a jednotky VH (výška okna zobrazení) nastavíme výšku těla na sto procent výšky okna prohlížeče.

Tento přístup umožňuje, aby prvek body zabíral celou dostupnou výšku obrazovky, bez ohledu na jeho obsah.

Technika bez použití rámců

Chcete-li vytvořit tělo na celou obrazovku bez použití rámců, můžete použít jednoduché CSS pravidla.

Nejprve je třeba nastavit velikost položek na stránce v procentech. Můžete například nastavit šířku a výšku položky těla na 100%:

body

Za druhé, je nutné odstranit odsazení a hranice u prvků na stránce. K tomu lze použít vlastnost margin a padding s hodnotou 0:

body

Tím, že nastavíme rozměry prvku body na 100% a odstraníme odsazení a hranice, dosáhneme toho, že body zaberou celou dostupnou plochu obrazovky.

Použití vlastností výšky a šířky 100%

Chcete-li vytvořit prvek na celé obrazovce, můžete použít vlastnosti výšky a šířky rovných 100%. To umožňuje prvku obsadit celou dostupnou oblast na stránce.

Текст

Nyní bude položka zabírat celou dostupnou oblast na stránce. To může být užitečné při vytváření adaptivních nebo celoobrazovkových rozhraní.

Aplikace absolutního polohování

Aplikace absolutního umístění umožňuje vytvářet různé efekty webového designu, jako je vytváření vyskakovacích oken, nabídek, nápověd atd.

Pro použití absolutního polohování je nutné u prvku zadat hodnotu vlastnosti position s hodnotou absolute . K nastavení polohy prvku pak můžete použít vlastnosti left , right , top a bottom.

Výhodou absolutního umístění je, že prvek může být přesně umístěn kdekoli na webové stránce, bez ohledu na ostatní prvky. Při používání této metody byste však měli být opatrní, protože prvek může překrývat jiné prvky nebo vytvářet posouvané oblasti webové stránky.

Je důležité poznamenat, že při použití absolutního polohování prvek nezabírá místo v normálním toku, takže další prvky na webové stránce mohou "sjíždět" nebo "zúžit". Abyste tomu zabránili , můžete použít vlastnost Z-index k nastavení pořadí překrývání prvků.

V důsledku toho je aplikace absolutního polohování výkonným nástrojem pro vytváření interaktivních a jedinečných webových návrhů, umístění prvků na správná místa a dodávání stránek dynamiku a efektnost.

Použití flexboxu pro protažení

1. display: flex; - tato vlastnost se vztahuje na nádobu, kterou je třeba natáhnout na celou obrazovku. Nastaví kontejneru Typ flexboxu, což umožňuje využít všechny jeho možnosti.
2. flex-direction: column; - tato vlastnost určuje směr, ve kterém budou umístěny prvky kontejneru. V tomto případě uvádíme column aby byly prvky umístěny svisle.
3. justify-content: center; - tato vlastnost určuje zarovnání prvků kontejneru vodorovně. Naznačovat center aby byly prvky umístěny ve středu obrazovky.
4. align-items: center; - tato vlastnost určuje zarovnání prvků kontejneru svisle. Také uvádíme center aby byly prvky umístěny ve středu obrazovky.
5. height: 100vh; - tato vlastnost udává výšku kontejneru ve viewportu. Naznačovat 100vh aby kontejner zabíral celou dostupnou vertikální oblast obrazovky.

Aplikace těchto vlastností umožní protáhnout body na celou obrazovku, což vytváří efekt vyplnění dostupné oblasti zobrazení.

Protažení těla pomocí grid mřížky

Nejprve je třeba nastavit styly pro kontejner, který bude obsahovat všechny prvky stránky. Můžete vytvořit kontejner s třídou "container" a použít na něj následující styly CSS:

V tomto příkladu používáme vlastnost display s hodnotou grid, která umožňuje vytvořit mřížku grid. Také nastavujeme minimální výšku kontejneru pomocí vlastnosti min-height a udáváme hodnotu 100vh. To znamená, že kontejner bude zabírat 100% výšky viditelné oblasti obrazovky.

Poté je nutné určit počet a šířku sloupců a počet a výšku řad v mřížce grid. K tomu lze použít následující styly CSS:

V tomto příkladu vytvoříme mřížku grid se 3 sloupci a 2 řadami pomocí vlastností grid-template-columns a grid-template-rows. Hodnota repeat(3, 1FR) označuje, že každý sloupec bude mít jeden stejný podíl dostupné šířky, zatímco repeat (2, 1FR) označuje, že každá řada bude zabírat jeden stejný podíl dostupné výšky.

Po zadání grid mřížky můžete přidat obsah stránky do prvků grid mřížky zadáním příslušných stylů.

Pomocí mřížky grid a zadáním příslušných hodnot pro šířku a výšku sloupců a řad lze tedy realizovat protažení těla na celou obrazovku.

Plovoucí prvky pro protažení těla

K vytvoření těla v celé výšce obrazovky lze použít plovoucí prvky.

Chcete-li to provést, musíte vytvořit kontejner s pevnou výškou a použít na něj vlastnost overflow: hidden;.

V tomto kontejneru pak vytvořte plovoucí prvky, které zaberou veškerý dostupný prostor.

K natažení svisle lze použít vlastnost height: 100%;.

Tímto způsobem se prvky protáhnou ve výšce kontejneru a zaberou celou dostupnou oblast.

Pro horizontální protažení lze použít vlastnost width: 100%;.

Tímto způsobem se prvky protáhnou přes šířku kontejneru a zaberou celou dostupnou oblast.

Aplikace plovoucích prvků umožňuje dosáhnout úplného protažení těla v obou směrech a vytvořit efekt plovoucích bloků na obrazovce.

Poznámka: pro použití vlastnosti height: 100% je nutné nastavit výšku u všech nadřazených prvků, včetně html a body.

Aplikace VH a vw měrných jednotek

Jednotky VH a vw se používají v CSS k zadání velikostí prvků na základě výšky a šířky viditelné oblasti okna prohlížeče.

Jednotka VH (viewport height) představuje jeden procentní podíl výšky viditelného okna prohlížeče. Například hodnota 100vh znamená, že prvek bude zabírat celou výšku viditelné oblasti okna

Jednotka měření vw (viewport width) funguje podobně, ale odkazuje na šířku viditelné oblasti okna. Hodnota 100vw znamená, že prvek bude zabírat celou šířku viditelné oblasti okna.

Aplikace VH a vw měrných jednotek umožňuje vytvářet adaptivní a responzivní webové stránky, které jsou přizpůsobeny velikosti obrazovky uživatele. To je užitečné zejména při vývoji mobilních aplikací a adaptivních verzí webových stránek.

.header .section

V tomto příkladu bude blok s třídou " header "zabírat celou výšku a šířku viditelné oblasti okna prohlížeče a blok s třídou" section " polovinu výšky a šířky viditelné oblasti okna.

Aplikace VH a vw měrných jednotek tak umožňuje snadno a flexibilně nastavit rozměry prvků a vytvářet adaptivní stránky na všech zařízeních.

Použití JavaScriptu pro adaptivní protažení

Pro začátek vytvořte základní strukturu souboru HTML:

Poté přidejte styly CSS, které nastaví výšku a šířku kontejneru body na celou obrazovku:

Nakonec přidejte další JavaScript kód, který protáhne kontejner body na celou obrazovku:

var container = document.getElementById("container");

var height = window.innerHeight;

var width = window.innerWidth;

container.style.height = height + "px";

container.style.width = width + "px";

Když se stránka načte, JavaScript funkce resizeContainer() změní velikost kontejneru body na rozměry okna prohlížeče. A když se změní velikost okna prohlížeče, funkce se také aktivuje, aby se zachovala přizpůsobivost tahu.

Nyní, váš kontejner body se natáhne na celou obrazovku, bez ohledu na rozlišení zařízení nebo velikosti okna prohlížeče.

Příklady a ukázky protahování těla

Níže je tabulka s příklady kódu, které vám pomohou lépe porozumět tomu, jak to funguje.

Pomocí těchto příkladů můžete dosáhnout protažení těla na celou obrazovku a vytvořit zajímavý design pro váš web.