在每一页打印页面顶部留出空白间距

Question

因此，我有一个标题，需要在用户打印此网站时出现在每个页面的顶部。我将位置设置为固定以使其出现在每个页面的顶部，但问题是标题现在重叠一些靠近顶部的内容。标题是静态大小的，因此如果我只能在每个页面的顶部放置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像素，而是在每一页上以某种方式隐藏了顶部的52像素内容。当我将页眉显示设置为无时，我注意到我的大部分内容仍然丢失了。

注意：如果存在javascript或jquery解决方案，我愿意尝试。"

- Surgery

---

请提供一些示例代码，展示您迄今为止尝试过的内容。您是使用CSS样式表还是内联方式进行操作？ - ramsey_tm

添加了示例代码。我有一个打印样式表。 - Surgery

有点解决了： 我将#content的显示值设置为“table-cell”，并设置了顶部和底部填充。这会导致在每个页面的顶部和底部留下空间。几乎完美。问题现在是，显然“table-cell”元素不会听取任何宽度设置，我有内容消失在页面的右边缘。如此接近，如此接近。 - Surgery

Answer 1

最终弄清楚了：

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

这将在每个页面的顶部和底部添加填充，不会切掉任何内容，使 #content 能够尊重宽度调整，以便内容不会被切断在页面的右侧。

- Surgery

Answer 2

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

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

- Dod

---

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

Answer 3

只需添加到#content中：

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

- frydoubt

---

这只在打印的第一页有效，在其他页面上，内容会直接顶到顶部。如果有区别的话，我是针对Firefox 17进行定位的。 - Surgery

如果是这种情况，您是否检查了所有其他页面的内容是否都包含在“#content” ID中？ - frydoubt

是的，没错。我发现了一个有趣的事情，关于“top:52px”这一行代码：它实际上并没有将内容向下移动52像素，而是在每个页面上隐藏了顶部的52像素内容。当我将页眉显示设置为无时，我注意到我的内容仍然缺少很大一部分。我也会将这个新信息添加到原始帖子中。 - Surgery

如果您能提供一个jsfiddle，我可能可以比仅仅提出建议并查看它们是否有效更好地帮助您。我怀疑这与您使用的position和top属性有关。 - frydoubt

它只在屏幕上显示一次，这正是我们想要的。但是如果您打印HTML，则它会出现在每个页面的顶部（我不知道为什么会出现这种行为），这也是我们想要的。我们不希望标题在打印时重叠顶部内容。 - Surgery

Answer 4

我认为你应该阅读关于CSS @media print 和 @page规则的margin属性这里。

- tetri

Answer 5

在我的情况下，我只添加了一个 padding-top: XXpx，然后就完成了。这个 CSS 在所有页面上都很好用。

- Roger Ospina