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

Question

Мне нравится печатать очень длинные таблицы на нескольких страницах. На каждой странице у меня есть фиксированный заголовок, несколько записей в разделе тела со случайной высотой и нижний колонтитул. Случайные записи не должны разбиваться на страницы, а нижний колонтитул должен использовать доступное оставшееся пространство. Я создал образец кода с помощью кнопки печати. Когда я нажимаю на кнопку печати, я хочу, чтобы оранжевое поле начиналось сразу после предыдущего красного поля и занимало все пространство в нижней части страницы. Есть идеи, как решить проблему?

const main = document.querySelectorAll(".table-body")[0];
const newDiv = document.createElement("div");
for (let i = 0; i < 30; i++) {
  newDiv.innerHTML += `<div class="box" style="height: ${getRandomIntInclusive(120,250)}px">Line ${i+1} </div>`
}
main.appendChild(newDiv);

document.getElementById("print").addEventListener("click", () => {
  window.print();
});

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

table {
  width: 100%;
  border: 1px solid blue;
  padding: 10px;
}

.table-body {
  border: 1px dashed green;
  padding: 10px;
}

.box {
  border: 1px solid red;
  page-break-inside: avoid;
}

table > tfoot > tr > td {
  border: 2px solid orange;
}

.table-footer {
  border: 1px solid black;
  min-height: 100px;
  vertical-align: top;
}

@media print {
  @page {
      size: letter;
  }
  
  #print {
    display: none;
  }
}

<button id='print'>Print</button>
<table>
  <thead>
    <tr>
      <th>
        Header
      </th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>
          <div class='table-body'></div>
      </td>
    <tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <div class='table-footer'>Footer</div>
      </td>
    <tr>
  </tfoot>
</table>

Answer 1

Я не смог решить проблему с помощью таблицы, поэтому я решил свою проблему с помощью divs. Я отслеживал случайную высоту div-ов на каждой странице и назначал оставшееся место для нижнего колонтитула. У моих нижних колонтитулов есть ограничение минимальной высоты, чтобы на каждой странице был нижний колонтитул. Содержимое каждой страницы помещается в другой раздел, чтобы дать мне больше контроля над стилем каждой страницы; например: разрыв страницы и переполнение. Решение не идеальное и надеюсь, что кто-то придет с лучшим подходом, но оно удовлетворяет мою потребность на данный момент. Ниже вы можете найти обновленный код:

const main = document.getElementById("main");
const newDiv = document.createElement("div");
const paperHeight = 11 // paper height in inch
const paperMargin = 1; // sum of top and bottom paper margins in inch
const overflow = 0.11; // used to protect page overflow to the next page
const dpi = 96; // Display dots per inch (DPI)
const maxHeight = (paperHeight - paperMargin) * dpi; // max page height
const footerMinHeight = 40; // Min height of footer
const headerHeight = 100; // Height of header in px
const numOfItems = 20; // Number of items

let j = 0;
let items = '';
let pageCount = 1;
do {
  items += `<div class="page" style="max-height: ${paperHeight - paperMargin - overflow}in"><div class="box header" style="height: ${headerHeight}px">Page ${pageCount} - Header</div>`;
  let pageHeight = headerHeight;
  do {
    const elementHeight = getRandomIntInclusive(60, 250);
    if (elementHeight + pageHeight > maxHeight - footerMinHeight || j === numOfItems) {
      items += `<div class="box footer" style="height: ${maxHeight - pageHeight}px">Footer</div></div>`;
      break;
    } else {
      pageHeight += elementHeight;
      j++;
    }
    items += `<div class="box" style="height: ${elementHeight}px">Item ${j} </div>`;
  } while (j <= numOfItems)
  pageCount++;
} while (j < numOfItems)
newDiv.innerHTML = items;
main.appendChild(newDiv);



document.getElementById("print").addEventListener("click", () => {
  window.print();
});

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

* {
  box-sizing: border-box;
}

.page {
  border: 1px dashed green;
  page-break-after: always;
  overflow: hidden;
}

.box {
  border-bottom: 1px solid red;
}

.header {
  background: #e6ffe6
}

.footer {
  background: #fdfed6;
}

@media print {
  @page {
    size: letter;
    margin: 0.5in;
  }
  #print {
    display: none;
  }
}

<button id='print'>Print</button>
<div id='main'></div>