html页脚don'；在打印预览中，t似乎停留在底部 即使我使用@media Print，我也无法在打印预览中获得第2页底部的实际版权页脚 如果将.footer中的位置更改为“绝对”，则此页脚不会出现在第二页中
我已经在下面粘贴了用html编写的信函模板，如果有人能解释我的问题，我将不胜感激html页脚don'；在打印预览中，t似乎停留在底部 即使我使用@media Print，我也无法在打印预览中获得第2页底部的实际版权页脚 如果将.footer中的位置更改为“绝对”，则此页脚不会出现在第二页中,html,css,sticky-footer,print-preview,Html,Css,Sticky Footer,Print Preview,我已经在下面粘贴了用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%; positio
<!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>
* {
保证金：0；
}
html，正文{
最小高度：100%；
位置：相对位置；
}
*#内容{最小高度：100%；}
*html*#内容{高度：100%；}
tfoot{显示：表页脚组；}
@媒体屏幕{
td.footer{
高度：37像素；
明确：两者皆有；
字体系列：“Verdana”；
字体大小：9px；
底部：0；
宽度：100%；
颜色：844C87；
位置：固定；
显示无；
}
}
@媒体印刷品{
.页脚{
字体系列：“Verdana”；
字体大小：9px；
颜色：844C87；
底部：0；
位置：绝对位置；
}
.推{
}
}
P.pagebreakhere{pagebreakbefore:always}
..... 一些标题html标记代码。。。。
…实际页脚，例如一些版权声明。。。。
..某些第1页html标记代码
…一些第2页html标记代码。。。。
<!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>
CSS分页符
@媒体所有
{
.header、.footer，p{display:none；}
}
@页码：对{
边缘顶部：9英寸；
}
@媒体印刷品
{
.页眉，.页脚
{
显示：块；
颜色：红色；
字体系列：Arial；
字体大小：16px；
文本转换：大写；
前分页符：右；
}
.header{前分页符：自动；后分页符：始终；}
p{
显示：块；
孤儿：2名；
寡妇：1人；
}
}
标题
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的
终点