Как растянуть элемент на всю высоту скролла 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 ещё нужно разрешить изменять пропорции).
Так что ищите где перемудрили.

Comments

[DZHAMBUALT]

При разработке у меня снова возникла проблема с этим. Теперь я прописал немного иные стили для body и html и на этот раз у меня не получается растянуть блок. Вот песочница)

[Ankhena]

DZHAMBUALT,
Хорошо сформулированный вопрос залог успеха. Пока не понятно, какой блок куда не растягивается. Вы сказали, что body 100vh и соответственно, красный блок тоже. Первый div 150vh. В браузере так и вижу. Что именно не так?

А вешать overflow на body, во-первых, дурной тон, во-вторых, на мобилках по крайней мере в части браузеров не сработает.

[DZHAMBUALT]

Ankhena, Это сделано для того чтобы в ios не было сильного скролла за пределлы бавузера

[DZHAMBUALT]

Ankhena, Мне надо растянуть красный div на всю высоту скролла body

[Ankhena]

DZHAMBUALT,

Мне надо растянуть красный div на всю высоту скролла body

Сейчас так и есть. Body на высоту вьюпорта и красный блок на всю высоту body и, соответственно, равен вьюпорту.

Это сделано для того чтобы в ios не было сильного скролла за пределлы бавузера

И как оно? Помогло?
Это решается либо нормальной версткой либо overflow на ближайшем родителе с подходящей шириной.

[Ankhena]

DZHAMBUALT, возможно, имеет смысл осознать разницу между height и min-height.

[DZHAMBUALT]

Ankhena, Можете дать код который расширит красный див на всю высоту body, розовый див растягивает body больше вьюпорта а красный див не растягивается на всю высоту розового дива и body. Просто очень срочно надо но ничего не получается

[DZHAMBUALT]

Ankhena, Плюс надо чтобы на ios не было этого momenum scroll

[Ankhena]

DZHAMBUALT,

Можете дать код который...

Это на фриланс.

Просто очень срочно надо но ничего не получается

Тем более на фриланс

[DZHAMBUALT]

Ankhena, А что мне делать если вы не говорите как это сделать. Вы ходите вокруг да около и не говорите что правильно а что нет. Я давно пытаюсь в этом разобраться и ничего дельного н получается

[Ankhena]

DZHAMBUALT,

А что мне делать если вы не говорите как это сделать.

Можно пойти на фриланс. Ведь у вас, я так понимаю это задание по работе.

Но в любом случае, придется начать с того, чтобы найти и убрать противоречие в этой фразе:

код который расширит красный див на всю высоту body, розовый див растягивает body больше вьюпорта а красный див не растягивается на всю высоту розового дива и body.

Вряд ли без этого кто-то сможет вам помочь. Я лично без понятия как растянуть блок по высоте body, не растягивая его по высоте body.

Или переформулировать вопрос так, чтобы было понятно чего вам нужно. Можно со скринами или видео.

Если один блок со скроллом, а другой без, то мне больше нравятся гриды.

Но и учитывайте, что сейчас ночь между двумя выходными.

[DZHAMBUALT]

Ankhena, Это оно?

[DZHAMBUALT]

Ankhena, Да уж, уже не надо. Пока до вас дойдет что угодно может случиться.