Как лучше реализовать верстку?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Всем привет, я делаю сайт лендинг, в нем все разделено по блокам, то есть сначала про нас, скрол вниз контакты, каждый блок высотой 100vh, как лучше реализовать такю штуку, у меня пока так:
код

/* <html></html> tag */ .page {     height: 100%;     background-color: var(--color-back-primary);     color: var(--color-text-primary);     font-size: 16px;     scroll-snap-type: y mandatory; }  /* <body></body> tag */ .page__body {     height: 100vh; }  /* site blocks */ .page__block {     height: 100%;     padding: 50px;     scroll-snap-align: start;     scroll-margin-block-start: 0; }

/* <html></html> tag */ .page { height: 100%; background-color: var(--color-back-primary); color: var(--color-text-primary); font-size: 16px; scroll-snap-type: y mandatory; } /* <body></body> tag */ .page__body { height: 100vh; } /* site blocks */ .page__block { height: 100%; padding: 50px; scroll-snap-align: start; scroll-margin-block-start: 0; }

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

Дополнительно:

Без реализации списка блоков в песочнице codepen.io непонятна цель отображения каждого блока. Из этого будет следовать то, что вам рекомендовать: поиграться с overflow свойством блока, или с min-height для растягивания блоков, или что-то еще.

  • У меня проблема в том, что когда я уменьшаю высоту окна, контент блоков заходит друг на друга, то есть за пределы

    Нарисуйте, а что с ним должно происходить?
    Потом поговорим и о стилях.
    Т.е. сначала нужно понимать, как это задумал дизайнер, а потом уже решать как делать вам.

    А так, любые плагины типа fullpage. Swiper тоже поддерживает полноэкранный вариант.

  • alexalexes Ankhena
    Это пример того, как я хочу, то есть здесь когда мы уменьшаем высоту окна, просто ничего не меняется, все за ним скрывается: https://disk.yandex.ru/i/Oo0Y0APEc-H6zQ
    А это как у меня происходит: https://disk.yandex.ru/i/8xzitToeJ9WQ8w
  • OCCASS OCCASSOVICH, вы хорошо понимаете, что будет двойной скролл? Для прокрутки контента внутри слайда и для прокрутки страницы? Или вы собираетесь просто обрезать, что не влезло и черт с ним?
  • Ankhena, про двойной скролл понимаю, а вообще черт с ним, пусть обрезается
  • Ankhena, то есть оно, когда уменьшаешь, начинает сжиматься, я понимаю почему, потому что элемент размещен с помощью position absolute по центру, но можно как это исправить?)

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Сергей Миронов Ответ

    Для эффективной и правильной реализации верстки веб-страницы рекомендуется следовать нескольким основным принципам и методам. Вот несколько советов, которые помогут вам улучшить верстку вашего сайта:

    1. Используйте семантические теги HTML: Для разметки содержимого страницы используйте семантические теги, такие как

    ,

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Linux Как диагностировать зависание RK3568 U-boot на Starting kernel? 0 ответов