Как зафиксировать div во весь экран на всех устройствах?

Question

[DocTypeMaster]

Подскажите пожалуйста, возникла необходимость зафиксировать div на всю область экрана, независимо от его размеров.

Сделал вот так но при разных размерах он прыгает

.full-screen {
width: 80vw;
height: 90vh;
margin: 10vmin;
padding: 0;
background: #ccc;
      }

вот такой должен быть див

Comments

[Ankhena]

width: 80vw;
height: 90vh;
margin: 10vmin;

Ещё бы он не прыгал, если так отступы задавать. Поставьте margin в соответствующих единицах, вертикальный в вертикальных, горизонтальный в горизонтальных.

Если цель такой записи в том, чтобы он был одинаковым, то считайте размеры через calc либо замените margin на padding.

[DocTypeMaster]

Ankhena, то есть можно сделать вот так: margin 10vw 10vh ?

[Ankhena]

DocTypeMaster, что вам может помешать?

[DocTypeMaster]

Ankhena, попробовал, блок на большом экране уходит за размеры области экрана, мне нужно чтобы он во всех плоскостях размерах, как это грамотно сделать ?

[DocTypeMaster]

Ankhena, а нет, все посмотрел, получилось, вот только теперь нужно сделать чтобы он на всех экранах был 2х3 где-то, то есть прямоугольник )

[DocTypeMaster]

Ankhena, чтобы не было такого

[Ankhena]

DocTypeMaster,

то есть прямоугольник )

А сейчас он, извините, кто?

Ставьте размеры такие, как вам нужно.
Но, наверное, имеет смысл сначала определиться как именно вам нужно.
Потому что 2х3 на вертикальном экране будет выглядеть совсем не так, как на горизонтальном. А вначале вы, вроде, хотели именно этого.

[Ankhena]

DocTypeMaster,

чтобы не было такого

Вы поставили ширину 25vw и высоту 90vh.
Не делайте так и не будет "такого".

Answer 1

[Сергей delphinpro]

.full-screen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 10vh 10vw;
  background: #ccc;
  background-clip: conent-box;
}