Question

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

应用程序集成为Sharepoint webpart（本质上是一个在Sharepoint页面中具有应用程序的iFrame），并且在屏幕上，看起来好像该视图是一个无限页面，其中set头仅位于最顶层视图和底部的页脚（这是预期的行为）。

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

@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> 标记分别位于内容的顶部和底部（应该是这样），{ {1}}将自动位于页面上的正确位置。如果您希望转移余下的<header>，则可以将 margin-bottom 应用于默认position: fixed位置下的<header>页面内容。

因此，您需要担心的是页脚，可以将其设置在页面底部，而不管内容的高度为 flexbox ：< / p>

static

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

＆＃13;

html,
body {
  height: 100%;
}

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

.content {
  flex: 1 0 auto;
}

＆＃13;

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

＆＃13;

并且有很多内容：

＆＃13;

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

＆＃13;

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

＆＃13;

这是最好的＆＃39;在我看来，创建一个始终保持在底部而不会重叠的页脚的方法，但实际上还有其他四种不同的方式，可以在 CSS Tricks 中看到。

希望这有帮助！

使用CSS @print进行页眉/页脚而不重叠内容

1 个答案: