HTML頁腳不似乎粘在打印預覽底部

我不能讓在第2頁中，即使我使用@media打印
如果您在打印預覽底部的實際版權頁腳將.footer中的位置更改爲「絕對」，此頁腳不會出現在第二頁中。

我粘貼了下面用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

誰能幫助？絕對不能回答這個問題。謝謝 – 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頁腳不似乎粘在打印預覽底部

回答

相關問題