Как прижать футер к низу страницы CSS?

Я могу предложить такое решение.

Структура сайта

<div id="page">

<header>

<!-- Содержимое шапки -->

Текст шапки.

</header>

<article>

<!-- Содержимое области контента -->

<p>Текст заполнения контента</p>

<!-- В примере приведена одна строка заполнения области контента, проверьте сначала так. Футер будет внизу страницы. Теперь для проверки нормального заполения области контента и положения подвала, предлогаю добавить пару строк <p>Текст заполнения контента</p><p>Текст заполнения контента</p><p>Текст заполнения контента</p><p>Текст заполнения контента</p><p>Текст заполнения контента</p> и в результате всё должно быть нормально. -->

</article>

<footer>

<!-- Содержимое области подвала -->

Текст подвала.

</footer>

</div>

стили

html, body{

height: 100%;

margin: 0;

}

#page{

min-height: 100%;

display: flex;

flex-direction: column;

}

header{

background: linen;

height: 70px;

}

article{

padding-top: 30px;

padding-bottom: 50px;

margin-bottom: auto;

background-color: azure;

}

footer{

height: 120px;

background: gray;

color: white;

}

Футер или "подвал" сайта прижимают к низу страницы с помощью правил каскадных стилей CSS. Но сейчас вся верстка идет в стандарте HTML5, а там предусмотрен функциональный тег <footer>. Так что задачу можно решить, обернув "подвал" в специальный тег и встроив его в верстку.

Лепим футер к низу на 0px, а перед ним подставляем нужной высоты блок, чтобы прокручивался до конца контент...

<div class="otstup"></div>

<div class="lepim"></div>

.otstup{padding-bottom: 50px;float:center;width:100%;height:50px;background:none;}

.lepim{position: fixed; bottom: 0; float:center;width:100%;height:50px;}