将HTML内容划分为A4页面

Question

我正在尝试模拟给定HTML文档的A4页面。基本上，我正在尝试为自定义文档格式创建非常基本的Google文档版本。此文档格式还具有页脚，页眉和页边距。我发现this question与我要达到的目标非常相似。但是，无论我如何更改填充，它的底部都不会与顶部保留相同的空间。我附上了我要实现的布局和当前HTML的屏幕截图。

从JSFIDDLE链接可以看到，我的内容没有分成2页。如果我更改填充大小，则会在顶部保留一个怪异的空间，但底部的空间不如顶部的空间大。

JAVASCRIPT

<script type="text/javascript">
var max_pages = 100;
var page_count = 0;

function snipMe() {
  page_count++;
  if (page_count > max_pages) {
    return;
  }
  var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
  console.log('Long: ' + long)
  var children = $(this).children().toArray();
  var removed = [];
  while (long > 0 && children.length > 0) {
    var child = children.pop();
    $(child).detach();
    removed.unshift(child);
    long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
  }
  if (removed.length > 0) {
    var a4 = $('<div class="A4"></div>');
    a4.append(removed);
    $(this).after(a4);
    snipMe.call(a4[0]);
  }
}
$(document).ready(function() {
  $('.A4').each(function() {
    snipMe.call(this);
  });
});

</script>

JSFIDDLE

https://jsfiddle.net/t2u7v0mq/