6

所以，当用户打印这个网站时，我有一个标题需要出现在每个页面的顶部。我将位置设置为固定以使其出现在每个页面的顶部，但问题是标题现在与顶部附近的一些内容重叠。标题是静态大小，所以如果我可以在每个页面的顶部放置 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 解决方案。

4

5 回答 5

1

终于想通了：

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

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

于 2013-09-09T18:30:25.340 回答
0

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

<div style="margin-top:20px"></div>
于 2013-09-06T16:47:19.037 回答
0

只需添加到#content：

#content {
    margin-top: 50px; // however many pixels you need
}
于 2013-09-06T17:05:08.247 回答
0

我认为您应该在此处阅读有关 CSS @media print和@page 规则边距属性 的信息。

于 2014-01-27T11:11:47.917 回答
0

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

于 2020-03-15T03:59:09.163 回答