Kopf- und Fußzeilen

Wenn du dein Firmenlogo, Bankverbindungsinformationen oder Seitenzahlen auf jeder Seite einfügen möchtest, möchtest du wahrscheinlich eine Kopf- oder Fußzeile verwenden.

Die hier gezeigten Beispiele können für alle Randbereiche auf der Seite verwendet werden.

Schau dir auch die Paged.js-Dokumentation zu einfachen Kopf-/Fußzeilen mit reinem CSS und komplexen Kopf-/Fußzeilen mit HTML-Markup an.

#Beispiel 1: Seitenzahl in der Fußzeile

Diese einfache Fußzeile kann mit reinem CSS gelöst werden.

@page {
	@bottom-center {
		content: "" counter(page);
	}
}

#Beispiel 2: Aktuelle Seite und Gesamtseiten in der Fußzeile

Diese einfache Fußzeile kann mit reinem CSS gelöst werden.

@page {
	@bottom-center {
		content: "" counter(page) "/" counter(pages);
	}
}

#Beispiel 3: Logo in der Fußzeile

Diese etwas komplexere Fußzeile erfordert sowohl HTML-Markup als auch CSS.

#HTML (template.ejs)

<div class="footer">
	<img src="./logo.png">
	<p>Danke für dein Vertrauen.</p>
</div>

#CSS (styles.css)

.footer {
	/*
	 * Die Höhe der Fußzeile sollte nicht größer sein als der Platz
	 * im Seitenrand:
	 */
	height: 20mm;

	/*
	 * Setze die Position auf "running" und verwende den benutzerdefinierten Bezeichner "runningFooter"
	 * (kann beliebig sein):
	 */
	position: running(runningFooter);

	/*
	 * Gib der Fußzeile einige Styles:
	 */
	display: flex;
	flex-direction: row;
	gap: 2mm;
}
.footer img {
	width: 5mm;
	height: 5mm;
}
.footer p {
	margin: 0;
}

@page {
	/*
	 * Stelle sicher, dass im Seitenrand genug Platz für die Fußzeile ist:
	 */
	margin: 20mm 11mm;

	/*
	 * Referenziere die Fußzeile und positioniere sie am Ende des unteren Seitenrands:
	 */
	@bottom-center {
		content: element(runningFooter);
	}
}