Как прижать футер к низу страницы Для начинающих верстальщиков проблематика не прижатого футера, какое-то время может быть не очевидна. Когда контента хватает на всю высоту экрана, футеру некуда деваться и он естественным образом сам прижимается к низу страницы. Ничего не подозревающий верстальщик сдает заказчику работу, а потом вдруг выясняется, что футер висит посередине страницы. Такое происходит, если контента на странице становится сильно меньше. Вот так выглядит страница с малым количеством контента в центральной его части и если футер не прижат. Есть ощущение, что он просто повис в воздухе. Как прижать футер к низу страницы. Прижать футер при верстке на flex Для примера создадим HTML страницу с классической структурой: общий контейнер container шапка header контент в центральной части main подвал footer <div class="container"> <header class="header">Header</header> <main class="content"> <h1 class="title">Липкий футер</h1> <div class="text"> <p>text text text</p> </div> </main> <footer class="footer">Footer Bottom</footer> </div> Пропишем CSS правила: .container { overflow: hidden; display: flex; flex-direction: column; min-height: 100vh; } .content { max-width: 800px; margin: 0 auto; padding: 40px 20px; } .footer { margin-top: auto; } Какие CSS свойства прижмут футер к низу? Зададим минимальную высоту у контейнера 100vh, при увеличении контента, этот блок будет вытягиваться в длину. Указав блоку footer свойство margin-top: auto, позволим браузеру автоматически вычислять верхний отступ, пока он не дойдет до низа контейнера. Первый способ .container { ... min-height: 100vh; } .footer { margin-top: auto; } Второй способ Блок content является flex-элементом flex-контейнера container и у него есть свойство flex-grow (жадность), которое по умолчанию равно 0. Если контенту задать flex-grow: 1, то он займет все пространство родителя. Тогда футеру будет доступно немного места внизу страницы. Именно это нам и нужно. .content { ... min-height: 100vh; flex-grow: 1; } Как прижать футер к низу страницы. Как прижать футер на Bootstrap Добавьте специальный класс mt-auto. <footer class="footer mt-auto"></footer> Необходимостью прижатия футера к низу страницы - это типичная задача, с которой рано или поздно столкнется каждый верстальщик. Эффект повисшего в воздухе футера возникает, когда недостаточно контента в основной части страницы. Однако изучая CSS-свойства по справочникам, а затем сталкиваясь уже с практической версткой, одной теории не хватает. Этот видеокурс "Вёрстка сайта с нуля 2.0", как раз направлен на практическое применение теоретических знаний. Посмотрите демо на CodePen