Единицы vw и vh в CSS

Единицы vw и vh позволяют задать размер относительно области просмотра окна браузера. Давайте посмотрим на примере.

Пусть у нас есть некоторый див:

html<div></div>

Давайте зададим ему ширину в половину ширины области просмотра и высоту в половину высоты области просмотра:

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

Посмотрим, что у нас получится:

Задание 1

Дан див. Задайте ему отступ сверху, равный 30% высоты области просмотра.

Задание 2

Дан див. Задайте ему ширину и высоту, равную 70% ширины области просмотра.