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

Question

我有一个<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 修复。

Answer 1

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

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

Answer 2

更新方式如下：

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

Answer 3

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