Футер или просто низ для сайта должен обязательно прилипать к низу страницы, это просто такое правило дизайна веб-сайтов. Где начинающие верстальщики изначально не понимают и для кого то это просто переходит в головоломку.
Все го то, это как нужно правильно растянуть контейнер, и сделать так, чтоб избежать переполнения при большом количестве текста. Закрепите нижний колонтитул в нижней части окна просмотра в настольных браузерах с помощью этого пользовательского HTML и CSS.
HTML
Код
<div id="kisedam-lagunad">
<main>
<h1>Здесь все, кроме нижнего колонтитула</h1>
<p>Добавьте больше текста здесь, чтобы увидеть, как реагирует нижний колонтитул!</p>
</main>
<footer>
<h1>Нижний колонтитул идет сюда</h1>
</footer>
</div>
CSS
Код
#kisedam-lagunad {
height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: auto;
}
footer {
flex-shrink: 0;
}
* {
margin: 0;
font-family: Candara;
}
h1, p {
padding: 20px;
}
footer {
color: white;
background: url(https://images.unsplash.com/photo-1550795598-717619d32900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
footer > h1 {
text-shadow: 1px 1px 3px #101010;
}
При необходимости используйте липкий нижний колонтитул с фиксированной панелью навигации. Привести нижний колонтитул в конец страниц с редким содержанием.
Демонстрация
