Jednotky vw a vh v CSS

Jednotky vw a vh umožňují nastavit velikost relativně k zobrazené oblasti okna prohlížeče. Podívejme se na příklad.

Předpokládejme, že máme nějaký div:

html<div></div>

Nastavme mu šířku na polovinu šířky zobrazené oblasti a výšku na polovinu výšky zobrazené oblasti:

cssdiv {
  width: 50vw;
  height: 50vh;
  margin: 30px auto;
  border: 1px solid red;
}

Podívejme se, co jsme získali:

Задание 1

Je dán div. Nastavte mu horní odsazení rovné 30% výšky zobrazené oblasti.

Задание 2

Je dán div. Nastavte mu šířku a výšku rovnou 70% šířky zobrazené oblasti.