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 сноска не казалось, держаться на дне в режиме предварительного просмотра

ответ

Смежные вопросы