Как задать резиновый отступ снизу от высоты монитора?

Question

[steef08]

Добрый день, столкнулись с проблемой, а именно — 5 section, в первом section располагается карта с position: fixed;
остальные section "наезжают" на первый при прокрутки страницы. Но вторая приподнята от низа на N-px и имеет анимацию (подпрыгивает вверх, со словами -прокрути страницу, чтобы увидеть, что внизу.
Наглядно взглянуть на проблему можно на странице — проекта
______________
Вопрос — как сделать вторую section которая заезжает на первую с картой, резиновый отступ от низа окна браузера для всех экранов? Желательно сделать по средствам CSS, есть проблемы с JS. Так же эта проблема распространяется на мобильные экраны. Приму любые советы, можно задать любые значения для блока с картой и остальных секшен

Экран 1080х1920

Экран 1366х768

Answer 1

[Арсений Матыцин]

Высота вьюпорта исчисляется в vh → https://developer.mozilla.org/en-US/docs/Web/CSS/length

Comments

[steef08]

Можно подробнее в примере именно данного случая сказать? пожалуйста

[Арсений Матыцин]

steef08, понимать бы кейс наверняка.

Но допустим тебе надо, чтобы карта была всегда, 60% от высоты вьюпорта, чтобы прямо на всех экранах так было. Тогда ты задаешь ей высоту height: 60vh и остальное, как я понял, наезд блока снизу в PX будет плюс минус одинаково заезжать на этот элемент.

Если надо, чтобы прямо поделили они первый экран между собой, то и карте и блоку с иконками можно задать размеры в VH. Вот только жестить в этом ключе не рекомендую, если экран маленький, а ноутбучный 768 это нынче из разряда планшетов, то впихивать в него дизайн от пк дело гиблое.

[steef08]

Арсений Матыцин, Что-то подобное получилось но есть но, и заключается в iframe карте которая хочет height и из-за чего ломается атрибут height: 65vh
кейс заключается в следующем
сайт на wordpress, используется плагин Elementor в связке с CustomCSS
Требуется - закрепить карту вверху с отступом вверх ( под header на 150px) далее разместить нижние секции с информацией с наездом на эту карту так чтобы на всех мониторах была видна полоса с надписью Контактная информация . Далее когда пользователь скролит страницу все нижние секции заезжают на эту карту скрывая ее.

[Арсений Матыцин]

steef08, vh надо описывать в стилях. Атрибут height врядли схавает это.

Ну в целом я вроде понял, да. Проще всего задать карте высоту, в VH и фиксированную позицию, а основному контенту отступ сверху на высоту карты с корректировкой. Т.е. margin-top:65vh;. Тогда карта будет оставаться на месте, а контент наезжать, при этом отступ и сформирует это окно.

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

[steef08]

Арсений Матыцин, Работает, но как только Fixed задаю карте ломается высота в vh

[Арсений Матыцин]

steef08, просто так ломаться не может. Смотри дебаггер, что кого перекрывает. Да и в целом я в тебя верю, дальше сам.

[steef08]

Арсений Матыцин, Спасибо большое за помощь! Счастливо)