Question

我试图在chrome上打印2页文档。第一页内容是固定的，第二页上有动态内容＆＃34;表格已扩展＆＃34;。

我遇到的问题是让页脚停留在第二页的底部。以下用于处理一页的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

我正在使用这个＆＃34; hack＆＃34;对于包含dinamic内容的页面，只需在包含您的内容的div中添加一些id并使用此脚本：

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

粘贴页面多页

1 个答案: