仅为最后一页修复了PRINT粘滞页脚

Question

我所拥有的是<table>它可以大或小有时只在一个页面上，有时它可能会增长到10页左右。

以下是示例代码：

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修复。

Answer 1

以下方式更新：

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

Answer 2

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

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

Answer 3

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