html页面中的自定义页眉和页脚
Posted
技术标签:
【中文标题】html页面中的自定义页眉和页脚【英文标题】：Custom header and footer in html page 【发布时间】：2012-02-13 05:05:24 【问题描述】：我想在打印模式下将页眉和页脚放在每一页中。我对此进行了很多研究。
我找到了两个解决方案。但它们不是跨浏览器（我希望它可以在 IE、Firefox 和 Chrome 中运行）
第一个解决方案：我在内容表的顶部和底部设置边距。然后我将页眉和页脚写入这个位置固定的空间。它在 Firefox 中运行完美。但是在 IE 和 Chrome 中它没有设置边距。同样在 Chrome 中，它不会将页眉和页脚写入每个页面。
这是我的代码：
分页.php
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
</head>
<body>
<table class="header" cellpadding="0" cellspacing="0">
<tr>
<td>header
</td>
</tr>
</table>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
content
</td>
</tr>
</table>
<table class="footer" cellpadding="0" cellspacing="0">
<tr>
<td>footer
</td>
</tr>
</table>
</body>
</html>
分页.css
@media screen
.header
width:768px;
height:100px;
border:2px solid #000;
.content
width:768px;
margin-top:10px;
margin-bottom:10px;
height:1000px;
.footer
width:768px;
height:100px;
border:2px solid #000;
@media print
.header
position:fixed;
top:0;
left:0;
width:768px;
height:100px;
border:2px solid #000;
.content
width:768px;
margin-top:120px;
margin-bottom:120px;
height:1000px;
.footer
position:fixed;
left:0;
bottom:0;
width:768px;
height:100px;
border:2px solid #000;
@page
margin-bottom:150px;
这是第二种解决方案：
在此解决方案中，我使用 table-header-group 和 table-footer-group 属性。它适用于 Firefox 和 IE。但是 Chrome 又不明白了。它不会在打印模式的每一页中重复页眉和页脚。
这是另一个代码：Is there a way to get a web page header/footer printed on every page?
<style type="text/css">
thead display: table-header-group;
tfoot display: table-footer-group;
</style>
<body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body>
有什么办法可以解决这个浏览器问题吗？或者你对我有什么建议吗？
【问题讨论】：
没有。您可以编译一个 PDF 并将其传递给打印管理器，也可以使用默认行为。 我也在创建 pdf，但速度很慢。所以我想用 html 来做这个 在 Chrome 中使用<thead> 和 <tfoot> 不起作用？
是的，它在打印模式下不起作用:(
@FURKANILGIN 你好，FURKAN ILGIN，你找到解决这个问题的方法了吗？我一直在寻找这个解决方案三天..但仍然没有运气。如果您找到任何解决方案，您介意我要求您分享您的解决方案吗？谢谢
【参考方案1】：
尝试在 div 标签而不是任何 table 标签中创建您的页面！ div 比 table 更轻量
<div id='header' style='height:230px'>
</div>
<div id='body'></div>
<div id='footer' style='height:230px'>
</div>
谢谢！
【讨论】：
我不是在咨询职位！如果可能，尝试使用绝对 :) 你没有理解我的问题。我想在每个页面的打印模式下都这样做【参考方案2】：在我看来，这个具有 een api 和许多选项（例如自定义页眉和页脚）的网站非常适合打印：
http://pdfmyurl.com
在我的情况下，速度非常好，并且不会改变布局中的任何内容。
解决方案二（大量工作）： 对所有元素使用绝对定位。
【讨论】：
以上是关于html页面中的自定义页眉和页脚的主要内容，如果未能解决你的问题，请参考以下文章