粘性页脚与多个页面

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

我使用这个 “黑客” 与DINAMIC内容页面，只需添加一些ID包括您的内容和使用此脚本的div：

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