Question

我一直在寻找一种在多页文档中打印固定页眉和页脚的解决方案。我已经接近让它按我的意愿工作了，但是仍然有一些问题：

这是我的html代码：

<div id="header">
    <table>
        <tr>
        </tr>
        ...
    </table>
</div>
<div id="main">
    <table>
        <tr>
            HERE DYNAMIC CONTENT
        </tr>
    </table>
</div>
<div id="footer">
   <p>FOOTER</p>
</div>

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding-top: 340px;
}
#main {
    width: 100%;
}
#header {
    width: 100%;
    display: block;
    position: fixed;
    top: 0;
}
#footer {
    width: 100%;
    display: block;
    position: fixed;
    bottom: 0;
}

当我用chrome打印此文档时，第一页的页眉很好，但是页脚与#main的最后一行重叠，而在第二页中，页眉和页脚都与我的内容重叠。

当我尝试在#main或body上添加一些边距或填充时，它仅在首页上起作用，该问题出现在从第2页开始的所有后续页面中。

我想给内容留一点余地，以避免在所有打印页面上切入内容。

我已经尝试过用一张脚踩桌子，但没有成功

感谢您的帮助

页脚和页眉重叠内容

0 个答案: