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

Question

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

CSS

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

Всем привет, попуп на css.
Сделал попуп чтоб открывался с правой стороны экрана, растянул его до самого низа, точнее вроде сделал, но он до самого низа сайта не растягивается, растянулся до видимой зоны экрана.

Рабочий пример:
https://jsfiddle.net/tLbfwky6/3/

Вот на скрине видно что я открыл попуп, но он до низа видимой области, а надо до низа всего сайта.

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

Как мне его растянуть до самого низа?

Вопрос задан более трёх лет назад
175 просмотров

1 комментарий

Подписаться 1 Средний 1 комментарий

Решения вопроса 1

47 комментариев

Антон Вебсайтовский @ws17 Автор вопроса

Вот так я понимаю, https://jsfiddle.net/oah9zgrk/2/
Да работает.
Чет об этом и не подумал даж.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena, а как быть если в попуп больше контента чем на сайте, выходит вот что https://jsfiddle.net/3h619okd/1/

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

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

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

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса
Ankhena, а как через css можно замутить чтобы у body пропадал скрол?
учитывая открытие модального окна таким способом.

/* активируем модальный блок */ .overlay:target+.popup { visibility: visible; opacity: 1; }
Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena, не совсем понял, приведи пример.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena, я тут чуть js добавил, и плюс попуп переделал fixed

Вот что вышло: https://jsfiddle.net/r9tu4jLo/6/

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

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса
Ankhena, вообще у контента после боду идет див, так что можно реализовать.
Я так понял этому див надо будет применить overflow: hidden

Методом:

.overlay:target + .ovhdd{ overflow: hidden; }
Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса
Если я правильно понял, то сделал вот: https://jsfiddle.net/r9tu4jLo/8/ но чет не срабатывает видимо чет не так понял.

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

<div class="ovh"> <body> контент </body> </div>
Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

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

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Антон Вебсайтовский,
Или речь шла чтобы над боди была обертка.

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

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса
Ankhena, а класс на боди что нельзя повесить? и будет не костыль.

<body class=""> контент </body>

А вообще поверх боди идет html, понятно что делать див поверх это уже херота.
Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса
Я тут еще способ попробовал

.overlay:target+.pd{ display:none; }

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

можно же не только убирать прокрутку у боди, а тупо скрыть контент, чтоб один попуп видно было.
Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

js'ом можно.

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

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

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

тогда я тебя походу не понял.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса
Ankhena,

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

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

<body class=""> контент </body>
Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS
Антон Вебсайтовский,
но при клике открыть попуп, контент не скрывает, странно, хотя должно.
https://jsfiddle.net/r9tu4jLo/11/

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

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

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

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

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

Можно.
Еще немножко и вы SPA напишете на CSS.
Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

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

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena,

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

закрытия окна не только идет по крестику но и если кликнуть в любом месте кроме окна, с этим как быть.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena,

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

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena,

зачем столько городить js, простое модальное окно, это плохой пример, все на css сделать можно.
но в моем случае можно js добавить. ради того чтобы в боди гасить скрол.

ты как обычно ) много написала ) и вроде все в тему и все не в тему )) как-то все мимо и ничего не сработало )) ты сама себе на уме, чет придумала, написала )) спасибо конечно ))

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

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

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Антон Вебсайтовский,
все на css сделать можно

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Антон Вебсайтовский,
Например, вот в таком порядке должны идти блоки:
https://jsfiddle.net/4zLfh8o0/

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса
Ankhena,

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

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

Так, давай разберем.
А у меня что идет не до обертки попупа?

<a href="#x" class="overlay" id="opn"></a> <i>---до обертки</i> <div class="popup"> <i>---после обертки</i> <div class="fvzp"> <h2>Заголовок</h2> <a class="close" title="Закрыть окно" href="#close"></a> </div> </div>
Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

А так ты до обертки всего кода на сайте.
То есть выходит что

<a href="#x" class="overlay" id="opn"></a>
Должен быть рядом с боди, я правильно понял? после боди.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Антон Вебсайтовский, я там выше песочницу сотворила. Работающую.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Антон Вебсайтовский,
Должен быть рядом с боди, я правильно понял? после боди.

Да. Перед оберткой всего сайта.
CSS не умеет селекторы наверх и наружу. Только вниз и внутрь.
Раз всё завязано на overlay, то всё должно идти после него, чтобы можно было использовать ~ и /или + для обращения к элементам после него.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Антон Вебсайтовский,
а до пишешь до обертки

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

Так что лучше не будем.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena,

Да. Перед оберткой всего сайта.
CSS не умеет селекторы наверх и наружу. Только вниз и внутрь.
Раз всё завязано на overlay, то всё должно идти после него, чтобы можно было использовать ~ и /или + для обращения к элементам после него.

Так с этим ясно, можно такой способ реализовать как щас сделали, на чистом css.
А вот с котлючением у боди скрола overflow: hidden, уже не выйдет, это если пихать код выше тега боди ) но такое делать нельзя.

а такая схема как работает? все равно боди первым срабатывает чем класс?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Антон Вебсайтовский,
А вот с котлючением у боди скрола overflow: hidden, уже не выйдет, это если пихать код выше тега боди ) но такое делать нельзя.

На css на body нельзя. Мы это уже обсуждали выше.

а такая схема как работает? все равно боди первым срабатывает чем класс?

Вообще не догадалась до смысла вопроса. Переформулируйте.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS
Антон Вебсайтовский, Хотя....

Если задать body id="body"
И в href указать его <a href="#body" title="">ОТКРЫТЬ ПОПУП</a>
А потом писать стили от,
в частности

body:target { height: 100vh; overflow: hidden; }

то получится.
Чистите лишнее и до ума сами доводите https://jsfiddle.net/1h9drz0x/
Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Более доработанная версия, https://jsfiddle.net/r9tu4jLo/17/

А то был косячек, если в попупе контент короткий, выходило что попуп обрезался и не был до низа сайта.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena,

body:target {
height: 100vh;
overflow: hidden;
}

аххаха ты что мои мысли читаешь, я вот думал об этом ), но как ты сделала я бы не догадался.

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ну так что, можно ли называть это костыли, вроде нет, все функции которые предназначены для css.

Чуть доработал.
https://jsfiddle.net/p8v5b4ec/2/

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Антон Вебсайтовский,
Ну так что, можно ли называть это костыли, вроде нет, все функции которые предназначены для css.

Да, сойдет, пока модалка на странице одна и нет цели делать доступный интерфейс (в данном случае речь про открытие и закрытие с клавиатуры).

Если их будет несколько, тоже можно натворить с помощью CSS, но это уже будет даже не костыль, а чистое извращение. Показывать не буду :)

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena, Ну я польщен, смотрю ты любишь извращения ), моя поклонница )))
Попуп будет один такой, он будет на всем сайте, но по мимо него есть другие попупы, тож из этой серии css и т.д, но я стили поменяю чтоб не пересекались, там обычные фиксированные окна, и вызываются тож так как этот, но по стандартному, не так как мы замутили через боди и т.д.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

моя поклонница )))

Когда вас учителя в школе к доске вызывали, это тоже было от большой любви лично к вам?

Но спасибо, посмеялась с утра :)

Написано более трёх лет назад
Антон Вебсайтовский @ws17 Автор вопроса

Ankhena, проблем не было, просто стили поменял и все ок.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Антон Вебсайтовский, и оно стало открываться с клавиатуры?

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

4 комментария

1 комментарий

Ваш ответ на вопрос

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

Похожие вопросы

CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 5 часов назад
- 66 просмотров
0

ответов
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 час назад
- 56 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 50 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 96 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 71 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 103 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 113 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать метку/ярлык?
- 1 подписчик
- 18 нояб.
- 43 просмотра
0

ответов
CSS

Простой
Как сверстать данный блок?
- 1 подписчик
- 18 нояб.
- 89 просмотров
3

ответа
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

move2usajobs LLC • Лос-Анджелес

от 2 000 до 4 000 $

Нужен верстальщик. Переверстать, доверстать, доработать интерфейс

22 нояб. 2024, в 16:13

7000 руб./за проект

Модуль для пересылки Telegram сообщений в чаты на Python Telethon

22 нояб. 2024, в 15:59

5000 руб./за проект

Доработка и исправление ошибок в работе Личного кабинета сайта

22 нояб. 2024, в 15:59

35000 руб./за проект

Answer 1 · 2020-11-20 22:44:26

Ankhena @Ankhena Куратор тега CSS

Нежно люблю верстку

Очевидно, позиционировать его относительно body, если хотите высоту считать относительно body.
Т.е. задать body relative.

Ответ написан более трёх лет назад

47 комментариев

Answer 2 · 2020-11-21 13:24:21

Добавь свойства overflow-y: auto;min-height: 110%;padding-bottom: 50px;
И тогда будет скроллиться не страница, а сам попап, и под все требования попап будет подходить

Answer 3 · 2020-11-20 22:31:05

.pd{
padding: 50px;
height: 100vh;
position: fixed;
top:0;
right:0;
}

Можно вот так, но тогда пропадает скролл, впринципе это такой же способ, какой и предложили сверху

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

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

Минуточку внимания

Войдите на сайт