Содержимое HTML-страницы перекрывает нижний колонтитул ⇐ CSS

[Anonymous]

Я добавил около 50 строк в одну таблицу. После этого содержимое перекрывает нижний колонтитул.
Данные 15 отображаются, но данные 16 и данные 17 отсутствуют.
Нижний колонтитул должен быть виден на всей странице.
Пример: при распечатке сводки выписки из больницы нижний колонтитул всех страниц.

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

Printable Document with Footer

body {
font-family: Arial, sans-serif;
margin: 50px;
padding: 0;
padding-bottom: 140px;
/* Ensure enough space between table and footer */
display: grid;
grid-template-rows: auto 1fr auto;
/* Header, Content, Footer */
min-height: 100vh;
}

.container {
width: 100%;
margin-bottom: 20px;
/* Space between container and footer */
}

.footer {
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
margin-top: 20px;
/* Space between container and footer */
}

.table-wrapper {
overflow: hidden;
/* Ensure table doesn't overlap footer */
}

table {
width: 100%;
border-collapse: collapse;
}

th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

@media print {
.footer {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
/* Adjust height as needed */
visibility: visible !important;
/* Ensure footer is visible on every printed page */
margin-top: 20px;
/* Space between container and footer */
}
body {
padding-bottom:  500px;
/* Adjust padding-bottom to create space for footer */
}
}









Header 1
Header 2
Header 3











Footer Content - This will appear on every printed page.

Он должен работать во время печати этой веб-страницы



Подробнее здесь: https://stackoverflow.com/questions/784 ... ith-footer