javascript - 在 1 个 DIV 中通过 CSS 实现多个页脚/页眉

Question

我从 HTML 源代码生成 PDF 文件。每个页面的高度为 1402 像素。第一个解决方案是，每边一个 DIV。然后放置页脚和页眉很容易。问题是:如果内容(动态生成的)不适合页面 div，它会与页脚重叠，在最坏的情况下，会破坏布局。所以所有的页面及其内容都放在一个 div 中，但是我如何添加 300 像素的页边距，这是页脚和页眉所需要的？

我试图在这张图片中展示我的问题:

整个白色的东西是一个 Div。黑线显示 Div 中的每个页面，但它们不在代码中。绿线显示在我需要边距的地方，这样红色内容就不会重叠，而是继续显示在第二页上。

Red -> current situation
Blue -> what I need

我还可以在文档中使用 Javascript。

你能帮帮我吗？

http://i.stack.imgur.com/iMFBb.png

这是迄今为止如何解决的 fiddle :

https://jsfiddle.net/8yvpavd7/1/

Answer 1

我建议您确保页面的高度低于特定限制。由于无论如何您都在使用绝对大小和定位，因此您可以使用 jquery 轻松检查(例如:)

$('#page1').height()  /  $('#page1').outerHeight()

由于我们对您的数据结构一无所知，因此我只能假设您需要什么。下面的 fiddle 应该可以解释我在说什么 https://jsfiddle.net/rkvs5s1z/2/

您可以删除部分内容，直到它适合高度。您需要存储删除的数据。fiddle 没有以正确的方向存储数据 - 它应该只是演示这是如何工作的

然后您附加一个新页面，包括您的页眉和页脚。

如果一页的内容大于两页，您可能需要重复这些步骤。

我还建议通过不切片单个字符而是完整单词来改进显示的示例。如果您的页面包含 html，您可能还需要检查 html 代码并正确嵌套。