Во многих случаях дизайнеры хотят расположить нижний колонтитул внизу, если содержимое страницы меньше, чем окно, и в конце страницы (то есть сразу после конца содержимого).
На рисунке содержимое меньше фактического размера окна, поэтому в конце отсутствует нижний колонтитул. Наша цель — разместить его внизу, только если содержимое невелико.
Мы собираемся достичь этого, используя 2 подхода.
- сравнить высоту окна html с высотой страницы.
- установите минимальную высоту для содержимого, чтобы высота заголовка + минимальная высота содержимого + высота нижнего колонтитула были равны высоте окна.
Следуйте позиционированию нижнего колонтитула с использованием первого подхода и позиционированию нижнего колонтитула с использованием второго подхода для кода в репозиториях git.
Если вы ссылаетесь на javascript для первого подхода, то вы обнаружите, что когда высота документа меньше высоты окна, мы добавляем нижний класс, который фактически размещает нижний колонтитул внизу, и если высота документа больше, чем высота окна, мы удаление нижнего класса, чтобы он шел после контента.
Здесь вы можете видеть, что фон содержимого находится до начала нижнего колонтитула, потому что минимальная высота содержимого установлена равной высоте окна (высота верхнего колонтитула + высота нижнего колонтитула).
В первом подходе мы переделываем позиционирование нижнего колонтитула при изменении размера, потому что высота документа может меняться в зависимости от изменения ширины окна браузера.
Во втором подходе мы используем минимальную высоту содержимого, поэтому изменение его высоты по отношению к изменению размера браузера не будет иметь значения, но разная ширина окна может иметь разную высоту для верхнего и нижнего колонтитула, поэтому нам нужно пересчитать высоту содержимого на основе другой высоты. при изменении размера.
Если вы используете какой-либо другой подход для этого варианта использования, поделитесь им в комментариях :)
