修复了仅用于最后一页的 PRINT 的粘滞页脚

Posted 2023-03-06

【中文标题】修复了仅用于最后一页的 PRINT 的粘滞页脚

【英文标题】：Fixed Sticky footer for PRINT only for last page

【发布时间】：2018-07-27 11:57:40

【问题描述】：

我有一个<table>，它可以是big或small，有时只在一页上，有时它可以增长到 10 页等等。 p>

这是一个示例代码：

div
  position:relative;
  height:100vh;


.table-blue
  width:100%;
  background:lightblue;


.table-blue td
  padding:5px 10px;


.table-blue-fotter
    position: absolute;
    bottom: 20px;/* for bottom gap */
    left: 0px;
    width:100%;
    background:gray;



@media print 
 .table-blue-fotter
    position: fixed;
    bottom: 20px;
    left:0px;
    width:100%;
    background:gray;

<div>
<table class="table-blue">
  <tr>
    <td>one</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>two</td>
    <td>two test</td>
  </tr>
  <tr>
    <td>three</td>
    <td>three test</td>
  </tr>
</table>

<table class="table-blue-fotter">
  <tr>
    <td>one</td>
    <td>one test</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>two</td>
    <td>two test</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>three</td>
    <td>three test</td>
    <td>one test</td>
  </tr>
</table>

</div>

Fiddle for property inspection - 这对我很有用。但如果表格变长，故事将变为this。

在第二个视图中，当第一个 <table> 变长时，打印视图页脚出现在每一页上。

所以我想要.table-blue-fotter 只出现在页面底部边缘的打印视图的最后一页上，无论内容高度如何。

仅在最后一页

期待CSS 修复。

【问题讨论】：

"在打印视图中，页脚出现在每一页上。"表示您的“每一页”在哪里，除了单页，我们看不到每一页。你能在这里澄清更多吗？

@Hanif “在每一页中”表示打印视图。如果你在 html 文件中使用 jsfiddle.net/jithinrajpr7/ur6d1h21 并单击 ctrl + p，那么你将获得不止一个打印视图的代码，并且你会看到“页脚出现在每一页上”。跨度>

【参考方案1】：

在您的 CSS 中，从媒体类型 print 中删除 position: fixed;。这导致页脚出现在每一页上。

结帐https://jsfiddle.net/ur6d1h21/12/

【讨论】：

请仔细阅读问题兄弟。我想要的是.table-blue-fotter 只出现在页面底部边缘的打印视图的最后一页上，无论内容高度是多少. 在我看来，这只能通过position: fixed; 来实现。

我明白了你的问题。你试过小提琴吗？在 chrome 中尝试打印模式，您可以看到页脚现在仅出现在页面底部的最后一页上。 position: fixed 在打印模式下使页脚出现在每页底部的所有页面上。

这是小提琴结果的全屏视图。 fiddle.jshell.net/ur6d1h21/12/show。尝试打印预览或从开发人员工具中启用打印模拟以进行检查。

请检查更新的问题你会明白我的意思兄弟。 :) ，误会请见谅。

【参考方案2】：

更新方式如下：

@media print 
  .table-blue-fotter 
    position: static; /* <-- Key line */
    bottom: 20px;
    left: 0px;
    width: 100%;
    background: gray;
  

【讨论】：

我不能使用position: static;，它会破坏固定的底部表格-无论如何我都希望在最后一个打印视图中使用this。

兄弟，这对我不起作用。我知道z-index的伎俩，表格只是一个演示，表格之前可以是其他内容，可能没有背景，我只是使用背景，所以大家可以看得更清楚。

我认为你可以很容易地用一个容器来包装，其中的内容并不重要。添加容器一点也不难。

兄弟，这用于app，其中背景有时可能不同。所以在打印中，我需要本机页面的bg colour，而不是容器。但我会给你一个 +1 的努力。

【参考方案3】：

我在打印样式表中遇到了同样的问题，该样式表对于具有页眉和页脚的页面具有粘性页脚。它在只有一页时有效。当 html 打印多页时，页脚在每一页上都保持粘性。页眉应该只在第一页，页脚应该在最后一页。我在这里找到了解决方案： CSS paged media :last page selector

【讨论】：

您好！如果提供更多详细信息，此答案会更有帮助：该链接问题中的哪些解决方案解决了您的问题？ （那里的评论似乎表明它没有解决）你有你可以分享的工作解决方案的示例代码吗？