CSS 고정 위치 바닥 글 인쇄

Question

각 페이지마다 다른 꼬리말 (즉, 상위 래퍼에 포함)을 인쇄하고 싶습니다. 나는 그것을 작동시킬 수 없습니다 ... 첫 페이지의 꼬리말은 항상 다른 모든 바닥 글을 오버플로합니다 (고정 된 위치 때문에) ... 절대 위치가 가장 좋지만 또 다른 문제가 있습니다 ... 당신은 어떻게 말할 수 없습니다 인쇄 페이지는 항상 페이지의 절대 끝에 위치하지 않을 것입니다. 여기

작동하지 않는 코드

...

HTML JS없이

#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 
} 

그것은이 가능하기

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

편집 : 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가 달라집니다.