Сценарий
Я работаю над этим сайтом Gatsby, используя Tailwind CSS, и там есть разные типы контента. Внутри блога занято все окно просмотра, и есть переполнение опциями прокрутки, но на некоторых страницах не так много контента, поэтому его нужно будет прокручивать, и я бы хотел, чтобы нижний колонтитул был закреплен в нижней части страница. Очень похоже на слайд в презентации. Заголовок всегда фиксируется сверху.
«Простое решение»
Простое решение, которое я получил, заключалось в том, чтобы создать два типа нижних колонтитулов, фиксированный и свободный, которые я мог просто выбрать, пока кодирование страниц, например <Layout footer="loose">...</Layout>
Проблема
Дело в том, что я не принимал во внимание размер области просмотра и разрешение для пользователя. В некоторых тестах некоторых браузеров эти «страницы типа слайдов» находились под заголовком. Вы можете попробовать его на здесь , но вот несколько снимков экрана.
Эта страница имеет фиксированный нижний колонтитул и «один слайд. посмотрите ", но @ Opera заголовок находится под заголовком
В этом случае был вставлен фиктивный контент, чтобы мы могли проверить поведение с более длинным содержание и фиксированный нижний колонтитул
То же, что и выше, но с «свободным нижним колонтитулом».
Решение проблемы
Поэтому мне интересно, могу ли я улучшить отзывчивость своего веб-сайта, получая отображаемую высоту страницы и сравнивая ее с областью просмотра, чтобы фиксированный класс был активирован в нижнем колонтитуле, что сделало бы его автоматизированным и «умнее». Эта функция, вероятно, будет использоваться и для других компонентов, но это основная проблема прямо сейчас.
Я нашел эту статью о том, как использовать точки останова без CSS, но цель - фиксированная ширина. В любом случае, это заставило меня задуматься о том, как я могу создать ловушку, которая будет извлекать отображаемую высоту страницы (контейнер div), сравнивать ее с размером области просмотра и запускать класс, который исправит эту проблему, и, возможно, он перезагрузит это значение с изменением размера экрана.
Мне не известно о каком-либо подходе к этому типу проблем, поэтому любые мысли или комментарии по этому поводу были бы очень признательны.