@AlexandrVV86

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

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

Первое, что приходит в голову - это решить с помощью javascript, отлавливая window.onresize.
Хотелось бы поинтересоваться, можно ли решить проблему с помощью CSS?
P.S. Google и Яндекс не помогли
  • Вопрос задан
  • 59 просмотров
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Нус, во-первых CSS не имеет разделение свойств в виде знака равенства. А вот так height: 100vh;. И это правило будет работать всегда, даже когда контента будет больше. Более того, даже после ресайза. Если у тебя при корректном CSS при ресайзе багует, ищи проблему в коде, а не в размерностях.

И в завершение, для таких блоков, есть смысл указывать min-height, чтобы исключить артефакты, если же все-таки содержимое блока оказывается больше того самого размера экрана.
Ответ написан
@AlexandrVV86 Автор вопроса
Вопрос решился методом научного тыка:
body {

height: 100vh;
}
.first-section{
width: 100%;
height: 100%;
}
Вроде бы работает, но пока вопрос не закрываю
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы