html - 多页粘性页脚

Question

我正在尝试在 chrome 上打印 2 页文档。第一页内容是固定的，第二页有动态内容“扩展的表格”。

我遇到的问题是让页脚停留在第二页的底部。以下 CSS 代码用于处理一个页面。

这里是 jsfiddle:https://jsfiddle.net/c3L4eevn/

CSS

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 110px;
  font-size: 15px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 110px;
}


@page {
  size: legal;
}

@media print {
  #hide {
    display: none !important;
  }
}

.container {
  width: 970px !important;
}

HTML

<div class="container">

    <div class="row">
        <div class="col-xs-12">
            head here
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            first page content
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            second page
        </div>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                footer here

            </div>
        </div>
    </div>
</footer>

Answer 1

我正在对包含动态内容的页面使用此“hack”，只需将一些 id 添加到包含您的内容的 div 并使用此脚本:

$("#content").bind("DOMSubtreeModified", () => {     
  if ($(document).height() < screen.height - $("footer").height())
    $("footer").addClass("navbar-fixed-bottom");
  else
    $("footer").removeClass("navbar-fixed-bottom");
});