css固定位置フッター印刷

Question

それぞれ異なるフッター（つまり、親ラッパーに含まれています）の複数のページを印刷したいとします。 私はそれを働かせることができません...最初のページからのフッタは常に（固定の位置のために）他のすべてのフッタをオーバーフローします...絶対的な位置付けが最高かもしれないが、別の問題があります...あなたは印刷ページが長くなるので、常にページの絶対的な終わりに配置されることはありません。ここで

JSせずに動作しないコード...

HTML

<div id="wrap"> 
     <div class="print1"> 
      <div class="foot"> 
       foot 1 
      </div> 
     </div> 
     <div class="page-break"></div> 
     <div class="print2"> 
      <div class="foot"> 
       foot 2 
      </div> 
     </div> 
     <div class="page-break"></div> 
     <div class="print3"> 
      <div class="foot"> 
       foot 3 
      </div> 
     </div> 
     <div class="page-break"></div> 
    </div> 

CSS

#wrap{ 
height:400px; 
width:100%; 
} 
.print1,.print2,.print3{ 
height:200px; 
border-bottom:1px solid #000; 
} 
.foot{ 
display: block; 
width:100%; 
position:fixed; 
bottom:0; 
margin-top:-54px; 
height:54px; 
} 
.page-break{ 
display:block; 
page-break-before:always 
} 

またこれも可能？

EDIT：Zインデックスは役立ちません...

ありがとう！

Answer 1

位置のために互いの上に表示されない問題を修正するには：固定。あなたは、次の操作を行うことができます。

.print1,.print2,.print3 
{ 
    position: relative; 
    height: 11in; 
    border-bottom: 1px solid #000; 
    page-break-inside: avoid; 
} 
.foot 
{ 
    display: block; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 1in;   
} 

親のdiv相対と絶対のフッターが各親のdivの一番下にあることを保証フッターを作ります。

ページの最下部にあるようにするには、ページのサイズ（各コンテナの.print1、print2 ...）をインチ単位で指定します。画面の解像度の違いによってピクセルを使用できないため、dpiの違いなどです。