CodeRoll | Frontend

Простой способ прикрепить футер к низу страницы



Зачем это необходимо?

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



Шаг 1.

Обернуть ваш хедер, контент и футер таким образом, чтоб в Вашей обертке wrapper было 2 родительских блока



<div class="wrapper">

    <div class="header_content">

        <nav>

            Ваше меню

        </nav>

        <main>

            Ваш контент

        </main>

    </div>

    <footer>

        Ваш подвал

    </footer>

</div>



Шаг 2.

Добавляем стили



.wrapper {

min-width: 100vh; /*Задаем на всю высоту экрана*/

display: flex; /*Задаем Flexbox элемент*/

flex-direction: column; /*Определяем раcположение блоков по вертикали*/

justify-content: space-between; /*Определяем пространство блоков по краям*/

}



Если у вас есть какие либо вопросы, пишите в личку @zapilim. Будем разбирать вместе!