仅为最后一页修复了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>

财产检查的小提琴 - 这对我有用.但是,如果表变得很长的故事将改变此.

在第一个视图中,当第一个视图<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;从 media type 中删除print。这导致页脚出现在每个页面上。

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