Javascript 在每一打印页的顶部留出空间

因此，当用户打印此网站时，我需要在每个页面的顶部显示一个标题。我将position设置为fixed，使其显示在每页的顶部，但问题是页眉现在与顶部附近的一些内容重叠。页眉是一个静态大小，所以如果我能在每一页的顶部放置一个边距X个像素数，就可以解决我的问题，但我找不到一种方法。谢谢

示例代码： HTML

“Top:52PX”是为了获取内容来避免页眉，但是它也会导致一些文本行在中间被一个分页符切断，这就是为什么它被注释掉的原因。 新信息： 关于“top:52px”行，我发现了一些有趣的东西：它实际上并没有将内容向下移动52像素，而是以某种方式隐藏了每个页面上最上面的52px内容。当我将标题显示设置为“无”时，我注意到了这一点，并注意到我的内容的重要部分仍然丢失

---

注意：如果存在javascript或jquery解决方案，我愿意使用这些解决方案。

有很多不同的方法可以做到这一点，一种快速的方法是只使用div标记，并将页边距顶部设置为您想要的像素数：

<div style="margin-top:20px"></div>

只需添加到#内容：

---

最后，我发现：

#content {
   position:relative;
   display:table;
   table-layout:fixed;
   padding-top:20px;
   padding-bottom:20px;
   width: 94%;
   height:auto;
}

---

这将在每页的顶部和底部添加填充，不会从顶部或底部截断任何内容，并允许内容进行宽度调整，以便内容不会在页面右侧截断。

我认为您应该阅读CSS@media print和@page rule margin属性。

在我的情况下，我只添加了一个填充顶部：XXpx，就是这样。css在所有页面中都运行良好

请提供一些示例代码，展示您迄今为止的尝试。您是在使用css样式表还是在内联中执行此操作？添加了示例代码。我有一个打印样式表。有点解决了：我将#content的显示值设置为“table cell”，并设置顶部和底部填充。这使得它在每页的顶部和底部都留有空间。近乎完美。现在的问题是，显然“表格单元格”元素不监听任何宽度设置，我的内容从页面的右边缘消失了。如此接近，如此接近。尝试此操作后，只有第一页有边距。这仅适用于打印的第一页。每隔一页，内容就会直接跳到顶部。如果这有什么不同的话，我会把目标锁定在Firefox 17上。如果是这样的话，你有没有检查过所有其他页面的内容都用#content id包装？是的，是的。关于“top:52px”行，我发现了一些有趣的东西：它实际上并没有将内容向下移动52像素，而是以某种方式隐藏了每个页面上最上面的52px内容。当我将标题显示设置为“无”时，我注意到了这一点，并注意到我的内容的重要部分仍然丢失。我也在把这些新信息添加到OP中。如果你能提供一个JSFIDLE，我可能会帮你做更多的事情，而不仅仅是提出建议，看看它们是否有效。我怀疑这与您使用

位置

和

顶部

属性有关。我不知道如何用JSFIDLE模拟打印，但它确实存在。谢谢

<div style="margin-top:20px"></div>

#content {
    margin-top: 50px; // however many pixels you need
}

#content {
   position:relative;
   display:table;
   table-layout:fixed;
   padding-top:20px;
   padding-bottom:20px;
   width: 94%;
   height:auto;
}