css - html页面中的自定义页眉和页脚-6ren

css - html页面中的自定义页眉和页脚

转载作者：技术小花猫更新时间：2023-10-29 11:13: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>

是否有解决此浏览器问题的技巧或您对我有什么建议？

最佳答案

尝试在 div 标签而不是任何表格标签中创建您的页面! div比table更轻量

<div id='header' style='height:230px'>
</div>

<div id='body'></div>

<div id='footer' style='height:230px'>
</div>

谢谢!

关于css - html页面中的自定义页眉和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8910807/

文章推荐： linux - 如何在 docker 实例中关闭 sendfile

文章推荐： linux - 将时间戳添加到 R CMD BATCH 输出文件名

文章推荐： css - 溢出-y : auto and overflow-x: visible in the same time?

技术小花猫

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - html页面中的自定义页眉和页脚