HTML 바닥 글은 인쇄 미리보기에서 바닥에 붙어 듯하지

내가 당신 경우 @media 인쇄
를 사용하는 경우에도 인쇄 미리보기 2 페이지의 맨 아래에있는 실제 저작권 바닥 글을 가져올 수 없습니다 .footer에서 postion을 "absolute"로 변경하면이 바닥 글은 두 번째 페이지에 나타나지 않습니다.

아래에 html로 작성된 편지 템플릿을 붙여 넣었습니다. 내 문제에 대해 밝히는 사람이 있으면 감사드립니다.HTML 바닥 글은 인쇄 미리보기에서 바닥에 붙어 듯하지

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
* { 
margin: 0; 
} 
html, body { 
min-height: 100%; 
position:relative; 
} 
*#contents { min-height: 100%; } 
* html *#contents { height: 100%; } 
tfoot { display: table-footer-group; } 
@media screen { 
td.footer { 
height: 37px; 
clear: both; 
font-family:"Verdana"; 
font-size:9px; 
bottom: 0; 
width: 100%; 
color: #844C87; 
position: fixed; 
display none; 
} 
} 
@media print { 
.footer { 
font-family:"Verdana"; 
font-size:9px; 
color: #844C87; 
bottom: 0; 
position: absolute; 
} 
.push { 
} 
} 
</style> 
<STYLE TYPE='text/css'> 
P.pagebreakhere {page-break-before: always} 
</STYLE> 
</head> 
<body> 
<table> 
<thead><tr><td> 
<!--*************************************************************************************--> 
<table> 
<tr><td align="left"><img src="someimage.gif"></td></tr> 
</table> 
<!--*************************************************************************************--> 
<table width="650" border="0"> 
..... Some Header html markup code .... 
</table><br/> 
<!--*************************************************************************************--> 
</td></tr></thead> 
<tfoot><tr><td class="footer"><div class="push"></div>...the ACTUAL FOOTER e.g. some copyright statements....</td></tr></tfoot> 
<tbody> 
<tr><td> 
<p>....Some Page 1 html markup code ....</p> 
<!--*************************************************************************************--> 
<P CLASS="pagebreakhere"> 
<!--*************************************************************************************--> 
<table> 
.....Some Page 2 html markup code .... 
</table> 
<!--*************************************************************************************--> 
</td></tr> 
</tbody> 
</table> 
</body> 
</html>

출처

2012-05-02 dale

: 유일한 해결 방법은 다음 예와 같은 내용에 따라 고정 된 여백을 사용하는 것입니다? 이것에 대한 답을 찾기 위해 Desparate. 감사합니다. – dale

jsfiddle.net을 작성하면 기꺼이 도와 드리겠습니다. – Davis

브라우저 특정 인쇄 대화 상자를 대신 사용하십시오. 끈끈한 바닥 글은 절대 또는 고정 위치 지정을 지원하며 그 중 어느 것도 부분적으로 CSS paged media입니다. 사람이 도움을 줄 수

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <title>CSS Page Breaks</title> 
<style type="text/css"> 
@media all 
    { 
    .header, .footer, p { display:none; } 
    } 

@page :right { 
    margin-top:9in; 
} 

@media print 
    { 
    .header, .footer 
    { 
    display: block; 
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    page-break-before: right; 
    } 

    .header { page-break-before: auto; page-break-after: always; } 

    p { 
    display: block; 
    orphans:2; 
    widows:1; 
    } 
} 
</style> 
</head> 
<body> 
    <h1 class="header">Title</h1> 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

<h2 class="footer">End</h2> 
</body> 
</html>

참조

XSL-FO Is Dead, CSS Paged Media Is Prime Suspect

출처

2012-10-13 20:33:33

HTML 바닥 글은 인쇄 미리보기에서 바닥에 붙어 듯하지

답변

관련 문제