Работа с height: vh. Как работать при измение размера экрана?

Question

[Александр Варлаков]

Здравствуйте! Со следующей проблемой:
Первая секция имеет высоту 100 vh, размер следующих, определяет размер контента. При открытии страницы не в полноэкранном режиме , а затем дальнейший разворот браузера, либо загрузка с открытой консолью и последующим ее закрытием, приводят к тому, что мы имеем размер первой секции, не такой как ожидали:
.first-section{
width: 100%;
height: 100vh;
}
Хочется:

Имеем, после перехода в полно экранный режим:


Понимаю, что браузер отрисовывает правильно, потому как высота в момент загрузки и после развертывания разная.

Первое, что приходит в голову - это решить с помощью javascript, отлавливая window.onresize.
Хотелось бы поинтересоваться, можно ли решить проблему с помощью CSS?
P.S. Google и Яндекс не помогли

Comments

[Александр Варлаков]

Alice, Спасибо, я нечто подобное читал. Вопрос был: можно ли это решить силами CSS. С помощью JS я эту проблему решить смогу сам

[Александр Варлаков]

Alice,
Вопрос решился методом научного тыка:
body {

height: 100vh;
}
.first-section{
width: 100%;
height: 100%;
}
Вроде бы работает, но пока вопрос не закрываю

Answer 1

[Арсений Матыцин]

Нус, во-первых CSS не имеет разделение свойств в виде знака равенства. А вот так height: 100vh;. И это правило будет работать всегда, даже когда контента будет больше. Более того, даже после ресайза. Если у тебя при корректном CSS при ресайзе багует, ищи проблему в коде, а не в размерностях.

И в завершение, для таких блоков, есть смысл указывать min-height, чтобы исключить артефакты, если же все-таки содержимое блока оказывается больше того самого размера экрана.

Comments

[Александр Варлаков]

"Нус, во-первых CSS не имеет разделение свойств в виде знака равенства." - согласен, уже поправил, тут печатал(не копировал), это опечатка в вопросе не более.
4-час ночи, было.. Я еще криво еще вопрос задал.
Пару скринов:


Для примера

Answer 2

[Александр Варлаков]

Вопрос решился методом научного тыка:
body {

height: 100vh;
}
.first-section{
width: 100%;
height: 100%;
}
Вроде бы работает, но пока вопрос не закрываю