CSS для высоты изображения для печати после вычета высоты и фута ⇐ CSS

[Anonymous]

Сейчас я пишу код для автоматической печати PDF-файлов (формата А4) с веб-сайта. HTML-код контента в основном имеет следующую структуру:

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

REVISION
DOCTYPES
TITLE


52
Manual
ABC DEF GHI JKL MNO PQR STU VWX YZ




 






........Very long long texts, may span a few pages...



[img]fig1.svg[/img]

Figure 1




[img]fig2.svg[/img]

Figure 2









 





ALL RIGHTS RESERVED.

Стиль CSS, который я сейчас использую, приведен ниже:

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

@media print {
.imageWidth {
height: auto !important;
width: auto !important;
max-width: 19cm !important;
}
.imageWrapper {
height: auto !important;
width: auto !important;
}
.illus {
page-break-after: always !important;
}
.imageTitle {
page-break-before: avoid !important;
page-break-inside: avoid !important;
}
.footerDiv, .footer-space {
height: 0.5cm;
}
.header-space {
height: 0.2cm;
}
}

По сути, полученный PDF-файл имеет повторяющуюся таблицу в верхней части и нижний колонтитул внизу на каждой странице. Первые несколько страниц представляют собой только текстовый контент, затем последние несколько страниц представляют собой изображения, по одному на каждой странице. Высота изображения занимает большую часть допустимого пространства между таблицей заголовка и нижним колонтитулом.
Приведенная выше таблица стилей CSS с использованием высоты: auto в основном работает нормально, за исключением случая, когда содержимое таблицы thead длиннее, чем обычно, плюс высота изображения (естественная высота) выше, чем обычно. Например, если заголовок слишком длинный (например, >10 слов), что приводит к увеличению высоты таблицы thead до 40 пикселей, а высота изображения превышает 650 пикселей, то заголовок изображения будет очень близким (но все же безопасное расстояние) в нижнем колонтитуле, то в распечатанном PDF-файле после изображения всегда будет пустая страница. На пустой странице нет таблицы заголовка, а есть только нижний колонтитул «ВСЕ ПРАВА ЗАЩИЩЕНЫ». внизу.
Я хочу избавиться от пустой страницы. Я мог бы установить размер изображения (в основном стиль .imageWidth) на меньший, но более безопасный размер, скажем, высоту: 17 см;. В этом случае лишних пустых страниц больше не будет, но часть пространства между таблицей thead и оператором нижнего колонтитула будет потрачена впустую. Я хочу использовать большую часть оставшегося пространства, поэтому хочу точно определить высоту изображения (в основном стиль .imageWidth), но, похоже, я не могу найти правильный способ ее определения.< /p>
Я пытался установить высоту .imageWidth на 95% или Calc(100% - 10px), но это оказалось бесполезно. Использование процентов внутри @media print, похоже, не работает, даже если я установлю высоту на 10%, изображение останется того же размера. И я обнаружил, что использование процентов может привести к тому, что на некоторых страницах изображений не будет таблицы thead (и это еще одна проблема).
Использование 100vh, как и многие другие подобные Предложенные вопросы не относятся к моему случаю. Изображения, которые мне нужны сейчас, занимают не всю высоту страницы, а только всю допустимую высоту страницы, оставшуюся после размещения таблицы thead и нижнего колонтитула. И что еще более важно, высота таблицы thead не фиксирована, она зависит от длины содержимого таблицы, как и высота изображения (внутренняя).
Я открыт для использования javascript для добавления/удаления/перетасовки элементов DOM, если результат PDF — это то, что я хочу. Я подумал использовать javascript, чтобы сначала получить высоту таблицы thead (например, document.querySelector("thead").offsetHeight), а затем я могу вычислить оставшееся пространство для изображения. Но я не знаю, как это сделать, так как считаю, что высота таблицы — это высота таблицы, напечатанной на экране, а не на листе А4.

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