HTML | Прижатый футер
Подвал сайта всегда должен быть прижат к низу экрана, если дизайн не требует другого, задача не самая сложная, но требующая определенных знаний.
Вот некоторые способы прижать подвал:
- абсолютное позиционирование
- минимальная высота контента
- табличная верстка
- css flex
- css grid
Рассмотрим два последних варианта, как наиболее актуальные. В обоих случаях нам нужно указать высоту html и body 100% и разделить сайт на две части - контент и футер.
css flex
Оборачиваем сайт во flex-контейнер, меняем направление основной оси флекса на вертикальную и указываем margin-top: auto для футера, тогда он отступив на максимально возможное расстояние от контента прижмется к низу.
css grid
Оборачиваем сайт в grid-контейнер, указываем футеру align-self: end и всё, футер прижат.
Подвал сайта всегда должен быть прижат к низу экрана, если дизайн не требует другого, задача не самая сложная, но требующая определенных знаний.
Вот некоторые способы прижать подвал:
- абсолютное позиционирование
- минимальная высота контента
- табличная верстка
- css flex
- css grid
Рассмотрим два последних варианта, как наиболее актуальные. В обоих случаях нам нужно указать высоту html и body 100% и разделить сайт на две части - контент и футер.
css flex
Оборачиваем сайт во flex-контейнер, меняем направление основной оси флекса на вертикальную и указываем margin-top: auto для футера, тогда он отступив на максимально возможное расстояние от контента прижмется к низу.
css grid
Оборачиваем сайт в grid-контейнер, указываем футеру align-self: end и всё, футер прижат.