Question

我正在使用表格在每个页面上创建一个页脚（在Firefox中运行，这已经足够了。）

（右键单击输出窗格 - ＆gt;此框架 - ＆gt;在新标签页中打开框架。然后打印预览将正常运行）

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

但是在最后一页上，表格页脚直接显示在文本下方。如果文本比最后一页短，则页脚会粘在上面。

我喜欢页脚位于最后一页的最底部。不幸的是@page扩展名在firefox中不起作用，或者我做错了：

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}

Answer 1

如果您只支持Firefox，这实际上非常简单。（跳过编辑，看一下也可以在IE中运行但技术性较差的技术.Chrome和其他webkit当我发布这个答案时，浏览器不支持重复页脚，所以我没有测试它们。

您所要做的就是在内容的末尾添加一个较大的底部边距。确切的大小并不重要，但它必须足够大，以确保超过页面的末尾。我建议至少将其设置为您认为用户将使用的最大纸张尺寸。

不用担心，这不会在文档末尾添加空白页面。边距与其他形式的空白区域（例如填充和 标记）不同，因为当它们超出页面边界时会被取消（see spec，第13.3.3节）。 Firefox和IE都会删除边距，但Firefox仍然会在页面底部生成一个页脚，就好像发生了分页一样。（IE，另一方面，表现就好像保证金从未存在，这就是为什么这种方法在该浏览器中不起作用的原因。）

您可以将保证金设置为pseudo-element以保持HTML整洁，并且可以使用@media print来阻止它显示在屏幕上。

这是代码。要在Firefox中查看它，请打开this jsfiddle，右键单击输出，选择This Frame＆gt;仅显示此帧，并进行打印预览。

＆＃13;

@media print {
  #content:after {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest paper size you support */
  }
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>PAGE FOOTER</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td id="content">
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

修改

另外一个选项适用于Firefox和IE。您所要做的就是将页脚放在单独的<div>中并将其固定到页面底部，然后使用重复的<tfoot>作为间隔符。这种方法确实有一些小缺点（详见下面的代码段）。

这是代码。要在Firefox中查看它，请打开this jsfiddle，右键单击输出，选择This Frame＆gt;仅显示此帧，并进行打印预览。在IE中，单击输出框，按CTRL + A，进行打印预览，然后更改＆＃34; As Asid Out On Screen＆＃34;到＆＃34;在屏幕上选择＆＃34;。

＆＃13;
＆＃13;
@media print { #spacer {height: 2em;} /* height of footer + a little extra */ #footer { position: fixed; bottom: 0; } }
＆＃13;
<table> <thead> <tr> <th>PAGE HEADER</th> </tr> <thead> <tfoot> <tr> <td id="spacer"></td> </tr> </tfoot> <tbody> <tr> <td> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </td> </tr> </tbody> </table> <div id="footer"> PAGE FOOTER </div>
＆＃13;
＆＃13;
＆＃13;

此方法的主要限制是它在打印作业的每个页面上放置一个相同的页脚，这意味着您不能有任何页面具有不同的页脚，或者没有页脚。此外，由于垫片的高度取决于页脚的高度，如果页脚高度发生变化，您必须对其进行调整。

Answer 2

如果使用绝对位置或固定位置，则无法仅在最后一页设置页脚。如果仅在页面不够长时才希望页脚位于底部，请使用不需要绝对/固定位置的粘性页脚技术。像这样

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

如果您真的需要每页底部的页脚，建议您先生成pdf并进行打印。如果您需要打印复杂的内容，无论如何您最终都会首先生成pdf，打印css非常有限。

Answer 3

这是一个有趣的问题，从未遇到/需要这个，所以我也学到了新东西。但是，这是我的工作解决方案（实际上你非常接近）：

使用#wrapper { position: relative }，#header，#footer和#content { position: absolute }以及其他位置和高度规则 CSS （ HTML 不变）您可以完全控制布局。您的代码可能如下所示：

下面的片段，jsFiddle：fiddle和 fiddle output frame

＆＃13;

html,body { height: 100%; width: 100%; overflow: hidden }

#wrapper {
    position: relative;
    height: 95%; width: 100%;
}
#wrapper #header {
    position: absolute;
    top: 0;
    height: 100px;
}
#wrapper #content {
    position: absolute;
    top: 100px;
}
#wrapper #footer {
    position: absolute;
    bottom: 0;
}

@media print {
    h1 {
      page-break-before: always;
    }

    @page {
      size: A4;
      margin: 0;
    }
}

＆＃13;

<table id="wrapper">
    <thead>
    <tr>
        <td id="header">HEADER TEXT</td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="https://unsplash.it/200?image=031" />
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            Welcome
            <h1>NEXT PAGE</h1>
            just one line
        </td>
    </tr>
    </tbody>
    
</table>

＆＃13;

Answer 4

您好我刚刚将以下媒体查询添加到您的CSS中。它工作

@media print {
 #footer {
    position: absolute;
    bottom: 0;
  }
}

检查以下小提琴

https://jsfiddle.net/jjsqgaza/

在最后一页的最底部打印表格页脚

4 个答案: