Верстка под 100vh?

Question

[Breeze1]

Подскажите, есть сайт например который всегда должен занимать высоту экрана на desktop. Макет рисовался под высоту 1080px. Как вы реализовуете такое ? По факту высота окна браузера на full hd 1920х1080 является не 1080, а 900 с копейками. То-есть уже не влазит. Я уже молчу за меньшие мониторы по высоте.

Как сделать, чтобы контент подстраивался под высоту браузера ?

Comments

[tema_sun]

Без макета сложно что-то сказать. В совсем "запущенных" случаях можно с transform: scale() поиграть.

[Breeze1]

tema_sun, имеете ввиду scale(0.8) например для body делать ?)

Answer 1

[Boris Köln]

Погуглите "резиновая верста" и "адаптивная верстка".

Comments

[Breeze1]

Причем тут адаптивная верстка к моему вопросу ?

Answer 2

[Егор Живагин]

Нормальный вариант - ткнуть этим вопросом дизайнера. Единственный нормальный вариант)

Answer 3

[Сергей Левченко]

Смотря какой макет, смотря какое ТЗ, media queries используйте...
Например:

.container {
  height: 100vh;
  min-height: 600px;
}
@media screen and (min-width: 600px) and (orientation: landscape) { 
  .container {
    min-height: 800px;
  }
}

можно условия по высоте при необходимости

@media screen and (min-height: 1200px) and (orientation: landscape) { 
  /* Стили CSS ... */
}

@media screen and (max-height: 700px)  { 
  /* Стили CSS ... */ 
}

Comments

[Breeze1]

а причем тут min-height ? я имею ввиду наоборот, что макет под 1080 высоту рисуется, а по факту высота браузера будет меньше пикселей на 100. То-есть места у меня не хватает.

[Сергей Левченко]

Breeze1, я думал вы делаете респонсив верстку в том числе и под мобильники и вам бы это помогло.
А в чем проблема сделать некоторые элементы меньше или вовсе скрыть на меньших экранах, чтобы уместилось? в чем проблема объяснить заказчику/дизайнеру?

[Breeze1]

Сергей Левченко, да там впритык диз все сделал, я думал возможно для этого какие-то приемы есть, и я туплю ) придется объяснять

[Сергей Герасимов]

Breeze1, попробуйте верстать всё в vh, размер шрифта, высота блоков и т.п. А ширину исходя из rem.

Может быть порыть в сторону viewport и его параметров, что-то типа zoom, height и т.п.