Сейчас очень модно на лендингах делать фоновые изображения, которые занимают 100% высоты окна браузера. Одни делают это с помощью
html,body{
heigth:100%
}
header{
heigth:100%
}
Но, в таком случае body заканчивается сразу после header'а, который имеет 100% высоту.
Другие используют viewport-юниты, указывая header'у 100vh. Как правильно делать такие вещи и есть ли другие способы ? Как вы верстаете подобные вещи ?
Можно привязать изображение прямо на body и задать ему bachground-size:cover, a контент на сайте вставлять через секции, и тогда контент должен быть позиционирован так как вам надо.
Если на body привязать изображение нельзя, тогда есть вариант создать еще 1 блок с изображением внутри и абсолютным позиционирование а высоту экрана считать при помощи js и задавать высчитанную высоту экрана через стили к изображению.
К сожалению я не совсем уверен, что правильно понял суть вашего вопроса.
Я понял, что вы имели ввиду. Я думаю, для того чтобы сохранить логичность и для того что-бы body имел реальную высоту а не высоту контейнера с фоном (с расположенным внутри контентом сайта), все же необходимо размещать все блоки в самом body.
А для изображения на первый экран высчитывать и задавать точную высоту при помощи 2 строк js или как вы написали при помощи vh. Не могу сказать что это красиво и изящно, но другого варианта, я не находил.
Js скорее всего будет предпочтительней если нужна поддержка старых браузеров.
«Как правильно» будет зависеть от ограничений, например, от поддержки свойств браузерами. Если ваша аудитория выключает js, то его использовать будет неправильно.
Простой
