Может быть, кто-то может объяснить, что здесь происходит, потому что я какое-то время ломал голову над этим, и все мои поиски в сети не дали функционального ответа. Вот пример HTML страницы с автоматически сгенерированными номерами страниц:
function pageCount() {
console.log(document.getElementsByClassName('page').length);
return document.getElementsByClassName('page').length;
}
document.querySelectorAll(".total").forEach(function(el, i) {
el.innerHTML = pageCount();
});
.page {
width: 8in;
height: 1in;
padding: 0em;
margin-top: .5in;
margin-left: 0in;
margin-right: 0in;
margin-bottom: 0.25in;
}
body {
color: black;
counter-reset: pagen;
font-family: "Courier New", Courier, monospace;
font-size: 10pt;
}
.footer {
counter-increment: pagen;
margin: auto;
width: 8in;
display: table;
}
#footer-left:before {
content: "Page " counter(pagen) " of ";
}
.ptable {
page-break-before: always;
page-break-inside: avoid;
}
@media print {
.footer {
position: fixed;
bottom: 0;
}
}
<html>
<head>
<style></style>
</head>
<body>
<div class="page">
<div class="footer">
<div id="footer-left"><span class="total"></span></div>
</div>
</div>
<div class="page">
<table class="ptable"></table>
<div class="footer">
<div id="footer-left"><span class="total"></span></div>
</div>
</div>
<div class="page">
<table class="ptable"></table>
<div class="footer">
<div id="footer-left"><span class="total"></span></div>
</div>
</div>
</body>
<script></script>
</html>
На экране мы видим отдельные поля нижнего колонтитула, показывающие номер страницы. Однако при печати go все нижние колонтитулы оказываются сложенными друг на друга в одном гигантском беспорядке. position: fixed; bottom: 0; заставляет элементы нижнего колонтитула складываться друг на друга, изменяя fixed на absolute, что означает, что они размещаются только на странице 1, а изменение на relative просто перемещает нижний колонтитул в конец содержимого. Любые предложения о том, как исправить это поведение? Для тестирования используется браузер Chrome.