Как растянуть элемент на всю высоту скролла body?

Question

[DZHAMBUALT]

Здраствуйте! Возможно задаю глупый вопрос но ничего про это рабочего для меня не нашел. У меня есть фон который позиционируется абсолютно относительно body. Моя задача растянуть фон на всю ширину body даже при скролле. Я указывал для фона и 100% и 100vh, но фон растягивается только до конца области просмотра. Мне не нужен fixed а нужно растянуть прям на весь контент сайта который находиться за пределами viewport-a

Answer 1

[Aleksey Solovyev]

Так vh и есть размер "области просмотра". Задайте top, right, bottom, left равное 0 (или inset: 0), а body позицию relative, чтобы растянуть на весь родитель (body):

Comments

[DZHAMBUALT]

От души. Не додумался до этого

[Ankhena]

DZHAMBUALT, Только не делайте, пожалуйста, фоны пустыми дивами без больших оснований для этого.

[Aleksey Solovyev]

Ankhena, а в чём заключается проблема пустого div? Помимо эстетического аспекта...

[Ankhena]

Aleksey Solovyev,
1. Мусор. В разметке должен быть смысл. А украшения в стилях.
2. Лишний элемент в DOM. Пока он один на простой странице это не страшно. (Я как-то удалила больше 10 тысяч лишних оберток со страницы лендинга, хозяева которого жаловались на тормоза)
3. Велик шанс того, что он будет удален из разметки другим разработчиком. И это логично, он ведь пустой.

Использование пустых тегов вместо псевдоэлементов один из признаков плохого кода.

А в данном случае даже псевдоэлемент не нужен, если я правильно понимаю задачу автора. Но раз отметил решением, видимо, правильно.

Answer 2

[Ankhena]

Моя задача растянуть фон на всю ширину body даже при скролле

указывал для фона и 100% и 100vh

vh вообще не имеют отношения к ширине.

Если всё таки речь про высоту, то 100vh очевидно не поможет, потому что это размер вьюпорта, а не контента body.
А вот 100% поможет. И cover тоже поможет.
Но для этого, body не должно быть ограничено вьюпортом или чем-то ещё.
Обычно для body задают min-height: 100vh или развлекаются с процентами от html. Но это делают для эффекта липкого футера.

Самое интересное, что по умолчанию body как раз таки растягивается по высоту контента. И соответственно, фон со 100% или cover поступит аналогично (если он не svg, у svg ещё нужно разрешить изменять пропорции).
Так что ищите где перемудрили.