スティッキーフッター複数のページで

Question

私はクロムの2ページの文書を印刷しようとしています。 最初のページコンテンツは固定されており、2番目のページには動的コンテンツ「拡張されたテーブル」があります。

問題は、2ページ目の一番下にフッターを置くことです。 下記のCSSコードを使用して1ページで作業します。

ここ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

私はいくつかのIDを追加し、動のコンテンツを含むページのために "ハック" これを使用していますあなたのコンテンツを含むdivに、このスクリプトを使用してください：

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