Как отобразить динамический шаблон HTML на нескольких страницах с верхним и нижним колонтитулом? ⇐ Html

[Anonymous]

Я работаю над проектом, в котором мне нужно распечатать HTML-код в PDF-файл. Содержимое HTML довольно динамично, и мне необходимо поддерживать фиксированный размер содержимого на странице, а также отображать верхний и нижний колонтитулы на каждой печатной странице.
Это пример настройки HTML для печати:

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

Главная страница и страницы со статическим контентом подходят, и это простой пример:

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

//Hardcoded HTML

Макет страницы выглядит следующим образом:

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

Имитированные разрывы страниц предназначены только для визуальной помощи во время разработки.
CSS:

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

.single-page {
position: relative;
display: block;
box-sizing: border-box;
width: 798px;
height: 1126px;
page-break-after: always;
break-inside: avoid;
overflow: visible;
background-color: white;
}

.page-content {
width: 698px;
height: 954px;
padding: 50px;
position: relative;
overflow: hidden;
break-inside: avoid;
}

Теперь CSS одностраничного и страничного содержимого отлично работает для печати, но, как вы можете видеть, мне пришлось определить высоту каждого из них, чтобы иметь возможность разрывать страницы на правильной высоте для печати PDF.
Проблема возникает для страниц, содержащих динамический контент. Динамический контент состоит из статических заголовков столбцов, заголовков страниц и т. д., а также смеси различных пользовательских компонентов, которые сильно различаются по отображаемой высоте.
Для этих страниц мне нужно убедиться, что динамический контент распределяется по нескольким экземплярам страницы всякий раз, когда общая высота контента превышает высоту, определенную в содержимом страницы (954 пикселя).
Мне уже удалось реализовать несколько работающую реализацию, где я сначала визуализирую весь контент внутри скрытого контейнера, а затем использовать это как основу для разделения контента на несколько страниц, но это слишком жестко и зависит от предварительного определения динамических элементов, чтобы заставить его работать для более сложных структур HTML. Чем больше я копаюсь в этой кроличьей норе решения, тем больше я чувствую, что делаю это излишне сложно и «хакерски».
Проще говоря: каким будет наиболее «угловой» способ разделения динамического контента с динамической высотой на несколько страниц, сохраняя при этом фиксированный заголовок, нижний колонтитул и размер контента на странице?

Подробнее здесь: https://stackoverflow.com/questions/789 ... r-and-foot