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

Question

I am running into an issue with an application that I am working on when printing the HTML page. 我在打印HTML页面时正在处理的应用程序遇到问题。 The application pulls from a generated report as its data source to populate content into HTML elements, for this we are using HandlebarsJS templating framework. 该应用程序从生成的报告中获取数据作为其数据源，以将内容填充到HTML元素中，为此，我们使用了HandlebarsJS模板框架。

The application is integrated as a Sharepoint webpart (essentially an iFrame that has the application within a Sharepoint page) and on the screen, it appears as if the view is one endless page with the set header only at the very top of the view and the footer at the bottom (this is expected behavior). 该应用程序被集成为一个Sharepoint Web部件（本质上是一个iFrame，该应用程序在Sharepoint页面中包含该应用程序），并且在屏幕上看起来好像该视图是一个无休止的页面，并且设置的标头仅位于视图的最顶部，并且页脚位于底部（这是预期的行为）。

However, when printing this page, we would like the header and footer repeated on each different page. 但是，在打印此页面时，我们希望在每个不同的页面上重复页眉和页脚。

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

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

Using this CSS rule, we are able to establish the headers and footers to be repeated, but any content that runs over into the next page is overlapped and does not provide a pleasant printed view. 使用此CSS规则，我们能够建立要重复的页眉和页脚，但是任何覆盖到下一页的内容都是重叠的，并且不能提供令人满意的打印视图。 I have tried manipulating margin properties but no to success, and because the nature of the app is dynamic, I don't exactly know which HTML elements will run over to the next page each time for each given report. 我曾尝试操纵页margin属性，但没有成功，而且由于该应用程序的性质是动态的，因此我不确定每个给定报告每次都将哪些HTML元素移至下一页。

I am merely responsible for uploading HTML snippets to a templating library for the template views, and the application code takes care of the entire page itself so I do not have access to <html> , <body> , or <head> tags. 我仅负责将HTML代码段上传到模板视图的模板库中，并且应用程序代码负责整个页面本身，因此我无法访问<html> ， <body>或<head>标记。

Have looked all over the web for solutions, but seems that this is still an issue people run into today. 已经在网上寻找解决方案，但这似乎仍然是当今人们遇到的问题。 Is anyone familiar with a solution to solve this issue? 有谁熟悉解决此问题的解决方案？

Answer 1

position: fixed will, by nature, cause your elements to be fixed to that part of the page. position: fixed ，本质上会使您的元素固定在页面的该部分。 That means that if other content should exist at that location, the fixed elements will overlap it. 这意味着，如果其他内容应存在于该位置，则固定元素将与之重叠。

Assuming your <header> and <footer> tags are at the top and bottom of your content respectively (as they should be), the <header> will automatically be in the right place on the page. 假设<header>和<footer>标记分别位于内容的顶部和底部（应分别位于其顶部和底部），则<header>将自动位于页面的正确位置。 Without position: fixed , you will be able to apply margin-bottom to the <header> under its default static position if you wish to shift the rest of the content down the page. 不带position: fixed ，如果希望将其余内容向下移动到页面的默认static位置，则可以在<header>下面加上margin-bottom 。

As such, all you need to worry about is the footer, which can be set to be at the bottom of the page regardless of the height of the content with flexbox : 因此，您只需要担心页脚，无论使用flexbox设置内容的高度如何，都可以将其设置为页面底部：

html,
body {
  height: 100%;
}

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

.content {
  flex: 1 0 auto;
}

Both of these can be seen in the following (with small content): 这两个都可以在下面看到（内容很少）：

 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>

And with a lot of content: 内容丰富：

 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>

This is the 'best' way to create a footer thatt will always stay at the bottom without overlapping in my opinion, but there are actually four other different ways, which can be seen at CSS Tricks . 这是创建页脚的“最佳”方法，在我看来，页脚将始终停留在底部而不会重叠，但是实际上还有其他四种不同的方法，可以在CSS Tricks上看到。

Hope this helps! 希望这可以帮助！

将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