将CSS @print用于页眉/页脚而不重叠内容

Question

我在打印HTML页面时正在处理的应用程序遇到问题。 该应用程序从生成的报告中获取数据作为其数据源，以将内容填充到HTML元素中，为此，我们使用了HandlebarsJS模板框架。

该应用程序被集成为一个Sharepoint Web部件（本质上是一个iFrame，该应用程序在Sharepoint页面中包含该应用程序），并且在屏幕上看起来好像该视图是一个无休止的页面，并且设置的标头仅位于视图的最顶部，并且页脚位于底部（这是预期的行为）。

但是，在打印此页面时，我们希望在每个不同的页面上重复页眉和页脚。

@media print {
    header {
        position: fixed;
        top: 0;
    }

    footer {
        position: fixed;
        bottom: 0;
    }
}

使用此CSS规则，我们能够建立要重复的页眉和页脚，但是任何覆盖到下一页的内容都是重叠的，并且不能提供令人满意的打印视图。 我曾尝试操纵页margin属性，但没有成功，而且由于该应用程序的性质是动态的，因此我不确定每个给定报告每次都将哪些HTML元素移至下一页。

我仅负责将HTML代码段上传到模板视图的模板库中，并且应用程序代码负责整个页面本身，因此我无法访问<html> ， <body>或<head>标记。

已经在网上寻找解决方案，但这似乎仍然是当今人们遇到的问题。 有谁熟悉解决此问题的解决方案？

Answer 1

position: fixed ，本质上会使您的元素固定在页面的该部分。 这意味着，如果其他内容应存在于该位置，则固定元素将与之重叠。

假设<header>和<footer>标记分别位于内容的顶部和底部（应分别位于其顶部和底部），则<header>将自动位于页面的正确位置。 不带position: fixed ，如果希望将其余内容向下移动到页面的默认static位置，则可以在<header>下面加上margin-bottom 。

因此，您只需要担心页脚，无论使用flexbox设置内容的高度如何，都可以将其设置为页面底部：

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}

这两个都可以在下面看到（内容很少）：

 html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex: 1 0 auto; } header { margin-bottom: 20px; } footer { margin-top: 20px; }

 <header>Header</header> <div class="content">Tiny Content</div> <footer>Footer</footer>

内容丰富：

 html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex: 1 0 auto; } header { margin-bottom: 20px; } footer { margin-top: 20px; }

 <header>Header</header> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum accumsan quam, a vestibulum quam lacinia vel. Nam id odio rhoncus, viverra nisi quis, vehicula lectus. Duis sodales, mauris a tincidunt elementum, odio lorem finibus est, in vestibulum nunc leo dignissim tortor. Vestibulum sed diam id nisi congue pretium. Suspendisse venenatis posuere lectus, non pretium sapien blandit placerat. Fusce mollis ullamcorper tincidunt. Mauris consectetur porta justo quis mollis. Integer non nisi id velit tincidunt tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus dictum orci libero, et vulputate lorem rutrum in. Nam eget ipsum massa. Proin aliquam felis orci, fermentum dignissim magna congue nec. Maecenas pharetra sodales tellus eu maximus. Curabitur iaculis, diam quis finibus cursus, justo ex luctus eros, ut venenatis eros diam quis dolor. Vestibulum eget porta odio. Quisque et sodales tellus, non fermentum odio. Praesent a nulla in ipsum pellentesque elementum nec quis neque. Sed congue risus libero, sed aliquam libero euismod et. Nunc id ultrices risus. Vestibulum ut diam sapien. Donec semper turpis vitae iaculis rutrum. Donec dignissim ornare massa, ut rutrum diam egestas vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Praesent vulputate iaculis tincidunt. Phasellus sit amet dolor a justo mollis fermentum. Quisque a varius nisl. Sed vel nisl sit amet mi mollis sagittis at in lacus. Cras at velit sit amet nibh viverra dignissim vel ullamcorper mi. Curabitur convallis ante vel sapien gravida, non feugiat nisi dictum. Maecenas vitae ullamcorper eros, eget mollis purus. Nam rutrum eros eu rhoncus suscipit. Praesent sit amet posuere eros. Mauris ut nisl a elit gravida luctus et id orci. Etiam tempor, nunc id volutpat interdum, ligula libero imperdiet magna, auctor mattis nunc nisl ac augue.</div> <footer>Footer</footer>

这是创建页脚的“最佳”方法，在我看来，页脚将始终停留在底部而不会重叠，但是实际上还有其他四种不同的方法，可以在CSS Tricks上看到。

希望这可以帮助！

将CSS @print用于页眉/页脚而不重叠内容

问题描述

1 个解决方案

解决方案1
1 2018-02-01 21:48:16

将CSS @print用于页眉/页脚而不重叠内容

问题描述

1 个解决方案

解决方案1 1 2018-02-01 21:48:16

解决方案1
1 2018-02-01 21:48:16