• Главная
>
• HTML/CSS

Если вам нужно прижать footer к низу окна, то вы можете использовать два основных подхода к решению этой задачи: CSS Grid и Flexbox. 

CSS Grid - это мощный инструмент для создания двумерных макетов. Он отлично подходит для создания сложных интерфейсов, и в данном случаи мы можем использовать Grid , чтобы прижать footer к низу окна. Посмотрим, как это реализовать на практике.

Как прижать footer к низу окна CSS Grid

CSS 

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.grid-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
}

header {
    background: lightblue;
    height: 60px;
}

main {
    background: #efefef;
    margin: 17px auto;
    width: 100%;
    max-width: 1280px;
    padding: 20px;
}

footer {
    background: lightgreen;
    height: 200px;
}

В этом примере, блоки header, main и footer упорядочены в ряд, благодаря display: grid;. Свойство grid-template-rows: auto 1fr auto; обеспечивает, что контент будет занимать все доступное пространство (1fr), а header и footer подстраиваются под свой натуральный размер (auto). Это гарантирует, что footer будет находиться внизу окна.

Как прижать footer к низу окна CSS FlexBox

Flexbox немножко проще и гибче в использовании для решения данной задачи.

CSS

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.flex-container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

main {
    flex: 1;
}

header {
    background: lightblue;
    height: 60px;
}

footer {
    background: lightgreen;
    height: 200px;
}

.content {
    background: #efefef;
    margin: 17px auto;
    width: 100%;
    max-width: 1280px;
    padding: 20px;
}

Здесь мы используем display: flex; чтобы сделать flex-container flex-контейнером, а flex-direction: column; чтобы расположить элементы в колонку. Свойство flex: 1; в элементе main обеспечивает, что он растянется, занимая оставшееся пространство, и автоматически "прикрепит" footer к низу окна.

Как итог

Выбор между использованием CSS Grid и Flexbox для прикрепления footer к низу, в конечном итоге сводится к личным предпочтениям. Оба метода предлагают надежные решения и могут быть использованы для решения данной задачи.