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个像素，而是以某种方式隐藏了每页上的52px内容。当我将标题显示设置为无，并注意到我的内容的重要部分仍然缺失时，我注意到了这一点。

注意：如果存在，我可以使用javascript或jquery解决方案。

Answer 1

最后想出来了：

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

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

Answer 2

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

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

Answer 3

只需添加到#content：

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

Answer 4

我认为你应该阅读CSS @media print 和 @page rule margin property here。

Answer 5

就我而言，我只添加了一个padding-top：XXpx。 CSS在所有页面上都能正常工作

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

5 个答案: