Как прижать футер к низу

Бывают ситуации когда на странице очень мало контента, из-за чего футер может стоять не в низу страницы и выглядеть неприятно. Это легко решается при помощи флексов.

Для примера возьмём стандартную структуру HTML страницы:

<!DOCTYPE html>
<html>
    <head>
        <title>Заголовок</title>
    </head>
    <body>
        <div class="wrapper">
            <header></header>
            <main></main>
            <footer></footer>
        </div>
    </body>
</html>

Следующие стили сделают так что футер будет всегда прижат к низу, а если контента будет много, то появится скролл:

html,
body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1 1 auto;
}

Это оптимальные стили для решения данной задачи. Ничего лишнего только те стили которые нужны для решения задачи.

Если вы не сбрасывали стили браузера по умолчанию, то при тестировании у вас может быть скролл на странице. Это потому что по умолчанию у браузера прописан margin для body. Нужно просто сбросить margin добавив в стилях для body свойство margin со значением 0:

html, body {
    height: 100%;
    margin: 0;
}
Треугольник на CSS
Треугольник на CSS Как нарисовать треугольник в CSS используя свойство clip-path и функции polygon. Правила рисования треугольников, определение координат и примеры рисования.
Комментарии 0

*** чтобы писать комментарии.