В настоящее время у вас есть элемент нижнего колонтитула, который существует как еще один простой элемент в потоке страницы (к вашему сведению, у вас есть избыточный position:relative на нем), так что он заканчивается там, где заканчивается содержимое над ним (т.е.ваше изображение).
Если вы хотите, чтобы нижний колонтитул захлопнулся в нижней части области просмотра, которая всегда остается видимой независимо от длины содержимого или положения прокрутки, то вы должны использовать position: fixed в нижнем колонтитуле, как показывает ответ Кродева.,Однако это занимает реальное пространство экрана и используется намеренно и по уважительной причине (например, какая-то панель действий во время некоторого неоправданного взаимодействия с пользователем).
Однако, для обычных страниц, когда у вас короткий контент и вы хотитенижний колонтитул, отображаемый в нижней части окна просмотра, лучше всего использовать гибкий макет, как показано ниже (который также предлагает все виды преимуществ):
Codepen
body {
height: 100vh;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#header {
background-color: red;
min-height: 100px;
}
#content {
flex: 1;
background-color: green;
/* to test a longer page */
/* min-height: 3000px; */
}
#footer {
background-color: blue;
min-height: 100px;
}
.section {
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="header" class="section">
header
</div>
<div id="content" class="section">
content
</div>
<div id="footer" class="section">
footer
</div>
</div>