Почему мое изображение нижнего колонтитула появляется после содержимого вместо того, чтобы придерживаться нижней части п ⇐ CSS

[Anonymous]

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

function generateDischargeReport() {
// Get all form elements
const elements = {
patientName: document.getElementById("DRD.V.R1.FULLNAME"),
healthInfo: document.getElementById("DRD.V.R1.MEDICALHISTORY"),
doctorName: document.getElementById("DRD.V.R1.DOCTOR_ID"),
diagnosis: document.getElementById("DRD.V.R1.D"),
physicalExam: document.getElementById("DRD.V.R1.P"),
investigation: document.getElementById("DRD.V.R1.M"),
treatment: document.getElementById("DRD.V.R1.T"),
prescription: document.getElementById("DRD.V.R1.PH"),
nationalId: document.getElementById("DRD.V.R1.NATIONALID"),
age: document.getElementById("DRD.V.R1.AGE"),
phoneNumber: document.getElementById("DRD.V.R1.PHONE_NUMBER"),
pulse: document.getElementById("DRD.V.R1.PULSE"),
oxygen: document.getElementById("DRD.V.R1.OXYGEN"),
bloodPressure: document.getElementById("DRD.V.R1.BLOOD_PRESSURE"),
height: document.getElementById("DRD.V.R1.HEIGHT"),
bmi: document.getElementById("DRD.V.R1.BMI"),
respiratory: document.getElementById("DRD.V.R1.RESPIRATORY"),
weight: document.getElementById("DRD.V.R1.WEIGHT"),
temperature: document.getElementById("DRD.V.R1.TEMPRETURE"),
triageLevel: document.getElementById("DRD.V.R1.TRIAGE_LEVEL"),
headerImage: document.getElementById("DRD.V.R1.HEADERLINK"),
footerImage: document.getElementById("DRD.V.R1.FOOTER")
};

// Current date/time
const currentDate = new Date();
const formattedDate = currentDate.toLocaleDateString('en-US');
const formattedTime = currentDate.toLocaleTimeString('en-US');

// Get all values with fallbacks
const values = {};
for (const [key, element] of Object.entries(elements)) {
values[key] = element?.value.trim() ||
(key === 'patientName' ? 'Unknown Patient' :
key === 'doctorName' ? 'Unknown Doctor' :
key === 'diagnosis' ? 'No diagnosis information.' :
key === 'physicalExam' ? 'No physical examination information.' :
key === 'investigation' ? 'No medical investigation information.' :
key === 'treatment' ? 'No treatment procedure information.' :
key === 'healthInfo' ? 'Health information not provided.' : 'N/A');
}

// Format health info with highlights
const formattedHealthInfo = values.healthInfo.split('\n').map(line => {
if (line.includes('diagnosed with')) {
return `
${line}
`;
} else if (line.includes('services were provided')) {
return `
${line}
`;
} else if (line.includes('On')) {
return `
${line}
`;
}
return `
${line}
`;
}).join('');

// Medical vitals table
const vitalsTable = `

Medical Vitals


[b]Pulse:[/b] ${values.pulse}
[b]Oxygen:[/b] ${values.oxygen}
[b]Blood Pressure:[/b] ${values.bloodPressure}


[b]Height:[/b] ${values.height}
[b]BMI:[/b] ${values.bmi}
[b]Respiratory:[/b] ${values.respiratory}


[b]Weight:[/b] ${values.weight}
[b]Temperature:[/b] ${values.temperature}
[b]Triage Level:[/b]  ${values.triageLevel}


`;

// Prescriptions table
const prescriptions = values.prescription.split(',').filter(p => p.trim());
const prescriptionTable = prescriptions.length ? `

Prescriptions

${prescriptions.map(p => `${p.trim()}`).join('')}

` : '';

// HTML report content
const reportHTML = `



Discharge Report - ${values.patientName}

@page {
size: A4;
margin: 20mm;
}
html, body {
height: auto; /* Changed to auto */
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #333;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Consider removing or adjusting */
background-color: #f4f7f6;
}
.header-img {
max-width: 95%;
height: auto;
display: block;
margin: 0 auto 20px auto;
}
.content-container {
width: 70%;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 10px;
flex: 1; /* Allows content to grow and push footer down */
}
h1 {
color: #2a7f55;
font-size: 28px;
text-align: center;
}
h2 {
font-size: 22px;
color: #2a7f55;
margin-top: 20px;
}
.highlight {
color: #007b5e;
}
.date-time {
text-align: right;
font-size: 14px;
color: #777;
}
.box {
border: 2px solid #ccc;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
background-color: #f9f9f9;
break-inside: avoid; /* Prevent boxes from breaking across pages */
}
.box-title {
font-weight: bold;
color: #2a7f55;
margin-bottom: 8px;
font-size: 18px;
}
.highlight-date {
color: #007b5e;
font-weight: bold;
}
.highlight-diagnosis {
color: #e74c3c;
font-weight: bold;
}
.highlight-services {
color: #3498db;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
break-inside: avoid; /* Prevent tables from breaking across pages */
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.footer-container {
width: 100%;
text-align: center;
padding: 20px 0;
background-color: #f4f7f6;
margin-top: auto;  /* Push footer to the bottom */
}
.footer-img {
max-width: 95%;
height: auto;
display: block;
margin: 0 auto;
}
@media print {
body {
background-color: white;
display: block;
}
.content-container {
box-shadow: none;
width: 100%;
padding: 0;
border-radius: 0;
}
.footer-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin-top: 0; /* Reset margin-top for fixed positioning */
}
.box {
break-inside: avoid;
}
table {
break-inside: avoid;
}
}



${values.headerImage ? `
[img]${values.headerImage}[/img]
` : ''}

Discharge Report

Report generated on: ${formattedDate} at ${formattedTime}

Patient Information
Patient Name: ${values.patientName}
Identification No.: ${values.nationalId}
Age: ${values.age}
Phone Number: ${values.phoneNumber}

Doctor Information
Doctor Name: ${values.doctorName}

${vitalsTable}

Health Information
${formattedHealthInfo}

Diagnosed
${values.diagnosis}


Physical Examination
${values.physicalExam}


Medical Investigation
${values.investigation}


Treatment Procedure
${values.treatment}


${prescriptionTable}


${values.footerImage ? `

[img]${values.footerImage}[/img]
` : ''}


`;

// Create and download the report
const blob = new Blob([reportHTML], { type: 'text/html' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = `${values.patientName.replace(/ /g, '_')}_Discharge_Report.html`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
}
< /code>
Я генерирую отчет о выписке как загружаемый файл .html с использованием JavaScript.  Отчет включает в себя: < /p>
изображение заголовка в верхней части (renders fine), < /p>
Динамическое содержание, которое может охватывать несколько страниц, < /p>
изображение нижнего колонтитула, которое должно появляться только один раз, в нижней части последней печатной страницы. Основной контент - но не обязательно в нижней части последней страницы. В более длинных отчетах он появляется сразу после окончания контента, который может быть на полпути вниз по странице, оставляя большое пустое пространство под ним. />  Что я пробовал:
Я поместил изображение нижнего колонтитула в моем HTML: < /p>
${values.footerImage ? `

[img]${values.footerImage}[/img]
` : ''}
< /code>
и мой CSS включает в себя: < /p>
.footer-container {
width: 100%;
text-align: center;
padding: 20px 0;
background-color: #f4f7f6;
}
.footer-img {
max-width: 95%;
height: auto;
display: block;
margin: 0 auto;
}
@media print {
.footer-container {
page-break-before: avoid;
page-break-after: avoid;
page-break-inside: avoid;
}
}
< /code>
Я также попытался добавить позицию: исправлена; Внизу: 0; 

to .footer-container , но это помещает нижний колонтитул в нижней части каждой страницы, которую я не хочу.
Мой вопрос:
Как я могу делать изображение нижнего колонтитула всегда в нижней части окончательной печатной страницы, независимо от того, сколько контента выше, не повторяя его на каждой странице? Поведение для макетов печати было бы очень оценено.

Подробнее здесь: https://stackoverflow.com/questions/795 ... the-bottom