Я попробовал использовать столбцы flex и flex-direction, изменив поля, и ожидал, что это решит проблему. К сожалению, этого не произошло
body {
background-image: url(

background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Header */
.nav-pills {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: url(

background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
top: 0;
width: 100%;
border: 1px solid #e7e7e7;
z-index: 1000;
margin: 0;
}
.nav-item {
display: inline;
float: left;
border: 1px solid #404040;
}
.nav-link {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.nav-link:hover {
background-image: url(

background-position: center;
border-radius: 4px;
}
/* Footer */
.footer {
background-image: url(

background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #e7e7e7;
width: 100%;
padding: 10px 0;
position: fixed;
bottom: 0;
z-index: 1000;
text-align: center;
margin: 0;
margin-top: 0;
}
#span-text {
color: #000;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.content-top, .content-bottom {
text-align: center;
}
.icon-link {
padding: 2px;
}
/* Стилі для 'post_details.html'. */
/* Стилі для заголовку блогу. */
.title {
border: 2px #eee solid;
color: black;
text-align: center;
padding: 10px;
font-family: 'Times New Roman', Times, serif;
}
/* Стилі для контенту блогу. */
#p-content {
text-align: center;
color: black;
font-family: 'Courier New', Courier, monospace;
}
/* Стилі для дати блогу. */
#p-created {
text-align: right;
color: black;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
/* Стилі для кнопки видалення блогу */
#delete-btn {
float: right;
margin: 1em;
}
/* Стилі для редагування блогу. */
#update-btn {
float: right;
margin: 1em;
}
/* Основний контейнер для контенту */
.main-content {
flex: 1;
padding-top: 60px; /* Висота заголовка */
padding-bottom: 60px; /* Висота футера */
margin-top: 60px; /* Висота заголовка */
margin-bottom: 60px; /* Висота футера */
}
Подробнее здесь: https://stackoverflow.com/questions/785 ... and-footer