JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="content">
  <div class="liner">
  
  </div>
</div>
<footer>
  <div class="page-number liner">
    <span class="current-page"></span>
    <span class="total-count"></span>
  </div>
</footer>

CSS

body {
  height: 100vh;
  counter-reset: page 1;
}
.content-item {
  padding: 1rem 0;
}
@media print {
  .content {
  height: calc(100vh - 48px);
  display: flex;
  }
}
@media screen {
.content {
  height: calc(100vh - 48px);
  border: solid 1px #000000;
  display: flex;
  overflow-y: scroll;
}
}

.liner {
  margin: .2rem;
}

.page-number {
  margin-top: 1rem;
  display: flex;
  position: fixed;
  bottom: 0px;
  height: 24px;
  width: 100%;
  border-top: solid 1px #000000;
}

.current-page::before {
    content: "Page\00A0" counter(page) "\00A0of\00A0\00A0";
}

JavaScript

let markup = '<div class="content-item">Content</div>';
let _linerDOM = document.getElementsByClassName('liner')[0];

for(let i = 0; i < 25; i++) {
	_linerDOM.innerHTML += markup;
}

let dimensions = { availableHeight: window.screen.availHeight, contentHeight : _linerDOM.scrollHeight };
let pageCount = Math.ceil((dimensions.contentHeight / dimensions.availableHeight), 0);

document.getElementsByClassName('total-count')[0].innerText = pageCount;

console.log(...[dimensions, pageCount]);