Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский,

все на css сделать можно

Я же не мешаю.
Делайте.
Даже написала что и как нужно изменить, чтобы сработало.
Осталось реализовать.

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский, определитесь уже со способом и не делайте кашу.

Если это чистый CSS, то нужно использовать соседние селекторы. И располагать overlay в коде ДО обертки основного содержимого, чтобы сработал этот самый соседний селектор .overlay:target + обертка

Если JS, то ему, для этой задачи, вообще без разницы как всё расположено в коде.
Разве что overlay (т.е. то, но что кликаем для закрытия) разумно делать оберткой для самой модалки.

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский, вот какой-то старый пример для студентов, но принцип там ясен.

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский, обрабатывать клик по другому месту окна ))))

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский,

а что если у боди скрыть прокрутку по дефолту типа, а класс который в боди к нему применить прокрутку.

И что? Победит класс по специфичности :)

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский,

но при клике открыть попуп, контент не скрывает, странно, хотя должно.
https://jsfiddle.net/r9tu4jLo/11/

Я там выше ссылку давала на то как работают соседние селекторы.

Если в разметке

<b></b>
<i></i>

то b+i сработает для i, а i+b не сработает ни для кого.

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

Можно.
Еще немножко и вы SPA напишете на CSS.

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский,

, а класс на боди что нельзя повесить? и будет не костыль.

js'ом можно.

А для варианта с CSS нет никакого проку от этого класса. Что с ним делать?

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский,

Или речь шла чтобы над боди была обертка.

Нет, конечно. Какая еще обертка над body.
Чтобы сработал +, overlay должен быть ДО обертки.
Соседние селекторы

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Теперь как-то при закрытие окна надо чтоб в боди скрол возвращался.

Так не toggle class, а добавить. К body и к модалке.
При клике на крестик убрать класс у body и модалки.

Можно обойтись одним классом, у body, но это не очень хорошая практика и может быть удобно только если одно окно на странице. Поэтому так не делают.

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский, типа того.

Но, в реальной жизни, если бы мне верстальщик прислал такие модалки, я бы его похвалила за находчивость и уволила :)

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский, Точнее никак именно на body.
Но если весь сайт положить в обертку.
И поменять расположение блоков в коде, так чтобы был рабочим селектор .overlay:target + обертка, то сможете задавать стили этой обертке, у нее обрезать лишнее, так чтобы у body в итоге не было прокрутки.
Но это самостоятельно.

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский, Никак.
Открывайте модалки на js.
Открывать их css'ом это моветон. И если вы только ради этого корежите привычные интерфейсы, то тем более.

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский,
Я бы делала прокрутку.

Не знаю, зачем вам попап высотой с контент сайта. Никогда не встречала подобного дизайна и не могу придумать ui/ux причин для него.
Обычно его размеры ограничиваются размерами вьюпорта или чуть меньше для визуальной гармонии. Если контента в нем больше, то делают прокрутку. Одновременно убирая её у body.

Вы можете задавать высоту (или мин макс высоту) , вместо растяжения с помощью координат.
Но тогда попап все равно вывалится из body, но хоть сохранит свой фон.

Как исключить свои посещения в Яндекс.Метрике?

Расслабьтесь.
Если на сайт ходят 10 человек, то свои посещения вы и так узнаете. Хотя, а что вы там делаете? :)
Если сто тыщщ, то ваше посещение вообще погоды не делает.

Почему при добавление float < li > верстка рушиться?

SteveJ42,

а какими способами можно поток сделать нормальным?

Из потока выводят float (частично) и position absolute, fixed, sticky.
Все остальные свойства нет.

Для вашей задачи 3 варианта:
- один так себе: инлайн-блоки
и два хороших:
- флексы
- гриды

раньше же верстали этими float и все было нормально

Ну да, использовали свойства не по их назначения. А еще раньше таблицы.
Флоаты подпирали костыликами clearfix (гуглится) разной степени безумия.

Не очень понятно, зачем вам хочется использовать плохие практики, вместо того, чтобы развиваться и пользоваться "благами цивилизации".
Знать нюансы работы флоатов да, нужно. Использовать для того чтобы сделать обтекание картинки текстом - да, в самый раз.
Но не для сеток и микросеток же.

Попуп не растягивается до самого низа сайта, растягивается до видимой части экрана, как поправить?

Антон Вебсайтовский, бывает

Как создать форму в форме с помощью javvascript?

maiskiykot, господи, какая разница, что с ними делать...

Как создать форму в форме с помощью javvascript?

maiskiykot, я вам дала вменяемый пример. Но если хотите развлечений, кто же запретит :)

Как применить стили ко всему, кроме одного?

Алексей Ярков, для нас да :))
Я на всякий случай.

Как применить стили ко всему, кроме одного?

Только .container div:not(.no), а то сам контейнер тоже покрасится.