Мой нижний колонтитул не прилипает к нижней части страницы из-за динамической таблицы. ⇐ CSS

[Anonymous]

Вот HTML:

Код: Выделить всё

-

html, body {
margin: 0;
padding: 0;
height: fit-content;
display: flex;
flex-direction: column;
}
body {
font-family: Agdasima, sans-serif;
background-color: #324ebf;
position: relative;
height: fit-content;
}
header {
background-color: #2b2189;
color: white;
padding: 10px;
text-align: center;
border-bottom: 4px solid #1a1358;
}
.container {
width: 80%;
margin: auto;
padding: 20px;
flex: 1 0 auto; /* Allow this section to grow */
background-color: #324ebf;
}
.container h2 {
color: white;
text-align: center;
}
.song-table {
width: 60%;
max-width: 600px;
margin: 20px auto;
border-collapse: collapse;
background-color: #ff69b4;
font-size: 14px;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #8b004b;
}
th {
background-color: #c71585;
color: white;
}
td {
background-color: #ff69b4;
color: black;
}
.content-bottom-padding {
padding-bottom: 50px; /* Adjust this as needed to create space */
}
footer {
background-color: #2b2189;
color: white;
text-align: center;
padding: 10px;
border-top: 4px solid #1a1358;
width: 100%;
}





test


abc






xyz

Я пробовал редактировать style.css и index.html миллионом способов, но так и не смог разобраться. Скрипт, который я использую на Python, использует панд, красивый суп и запросы.
Короче говоря, скрипт в основном вводит данные с другого веб-сайта в виде таблицы. Эта таблица увеличивается вместе с объемом данных, поступающих в нее. Я считаю, что именно это и является причиной проблемы. Изначально у меня возникла проблема: нижний колонтитул находился внизу страницы, но просто перекрывал таблицу. Однако теперь проблема в том, что нижний колонтитул полностью находится над таблицей.

Подробнее здесь: https://stackoverflow.com/questions/790 ... amic-table