在每个打印页面的顶部留出空间答案

【问题标题】：Leave space at the top of every printed page在每个打印页面的顶部留出空间
【发布时间】：2013-09-06 16:42:21
【问题描述】：

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

示例代码： HTML

<header>This should be at the top of every printed page</header>
<section id="content">*Multiple pages of text*</section>

CSS

header {
position:fixed;
top:-10;
height:20px;
}

#content {
left:0px;
overflow:visible;
position:relative;
/*top:52px;*/
width:98%;
}

“top:52px”的作用是让内容避开标题，但它也导致一些文本行在中间被分页符截断，这就是它被注释掉的原因。

新信息：关于“top:52px”行，我发现了一些有趣的东西：它实际上并没有将内容向下移动 52 像素，而是以某种方式隐藏了每一页上前 52px 的内容。当我将标题显示设置为无时，我注意到了这一点，并注意到我的大部分内容仍然丢失。

注意：如果存在 javascript 或 jquery 解决方案，我愿意接受。

【问题讨论】：

请提供一些示例代码，展示您迄今为止所做的尝试。您是使用 css 样式表还是内联？
添加了示例代码。我有一个打印样式表。
有点解决了：我将#content的显示值设置为“table-cell”并设置了顶部和底部填充。这会导致它在每页的顶部和底部留出空间。近乎完美。现在的问题是，显然“表格单元格”元素不听任何宽度设置，并且我的内容从页面的右边缘消失了。这么近，这么近。

标签： javascript html css printing

【解决方案1】：

终于想通了：

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

这会将填充放在每个页面的顶部和底部，不会从顶部或底部截断任何内容，并允许 #content 遵守宽度调整，以便内容不会在右侧被截断页面。

【讨论】：

【解决方案2】：

有很多不同的方法可以做到这一点，一种快速的方法是使用 div 标签并将 margin-top 设置为您想要的任意像素数：

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

【讨论】：

试过了，只有第一页有边距。

【解决方案3】：

只需添加到#content：

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

【讨论】：

这仅适用于打印的第一页。每隔一页，内容就会上升到顶部。如果这有所作为，我的目标是 Firefox 17。
如果是这种情况，您是否检查过所有其他页面的内容是否都使用#content id 进行了包装？
是的，是的。关于“top:52px”行，我发现了一些有趣的东西：它实际上并没有将内容向下移动 52 像素，它以某种方式隐藏了每个页面上前 52px 的内容。当我将标题显示设置为无时，我注意到了这一点，并注意到我的内容的重要部分仍然丢失。我也在将这个新信息添加到 OP 中。
如果您能提供一个 jsfiddle，我可能会帮助您，而不仅仅是提出建议并查看它们是否有效。我怀疑这与您使用 position 和 top 属性有关。
jsfiddle.net/K4ENQ/3 我不知道如何用 jsfiddle 模拟打印，但它确实存在。谢谢。

【解决方案4】：

我认为您应该阅读 CSS @media print 和 @page 规则边距属性 here。

【讨论】：

【解决方案5】：

在我的例子中，我只添加了一个 padding-top: XXpx 就是这样。 CSS 在所有页面中都运行良好

【讨论】：