css - 修复了仅最后一页打印的粘性页脚

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 .

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

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

仅在最后一页

希望得到 CSS修复。

Answer 1

更新方式如下:

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