html - 在最后一页,html打印 table 页脚底部

59 5

我使用 table 在每个页面的( 能在 Firefox 里工作就足够了) 上创建页脚。

JS Fiddle: https://jsfiddle.net/j9k2xzze/

(右键单击输出面板- 然后打印预览功能将正常运行)


<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>



但是在最后一个页面中,table 页脚直接显示在文本下面。 如果文本比最后一页短,则页脚会粘到它上面。

我喜欢页脚在最后一页的最底部。 不幸的是 @page 扩展在 Firefox 中不起作用,或者是我做错了:


@page:last {


 #footer {


 position: absolute;


 bottom: 0;


 }


}



时间:

71 2

如果你只支持 Firefox,这实际上很容易。 (跳到编辑中可以看到一种技术,它也可以在IE中运行,但是,功能较少。 至于 Chrome 当我发布这个答案时它不支持重复页脚,所以我没有测试它

在内容末尾添加一个大的底部 margin 。 它必须足够大,以保证超过页面的末尾。 不用担心,这不会在文档的结尾添加一个空白页面。 边距在打印中扮演特殊角色,因为当超出页面边界( 参见规范,第 13.3.3节) 时,它们会被取消。 但是,Firefox仍然将页脚放在页面底部,就好像它是由分页符触发的一样。 (另一方面, IE 只是忽略了截断 margin ,这就是为什么这种方法在该浏览器中不起作用的原因

你可以将 margin 放在伪元素上以保持你的HTML整洁, 你可以使用 @media print 来阻止它在屏幕上显示

这是代码。 要看它在Firefox中工作,打开这个jsfiddlejsfiddle,右键单击输出,选择此Frame> Show only this Frame,然后进行打印预览。


@media print {


 #content:after {


 display: block;


 content:"";


 margin-bottom: 594mm;/* must be larger than largest paper size you support */


 }


}

<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>

编辑

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

这是代码。 要看它在Firefox中工作,打开这个 jsfiddlejsfiddle,右键单击输出,选择此Frame> Show only this Frame,然后进行打印预览。 在 IE 中,单击输出框,点击 CTRL+A,执行打印预览,然后将"在屏幕上布局"更改为"在屏幕上选择"。


@media print {


 #spacer {height: 2em;}/* height of footer + a little extra */


 #footer {


 position: fixed;


 bottom: 0;


 }


}

<table>


 <thead>


 <tr>


 <th>PAGE HEADER</th>


 </tr>


 <thead>


 <tfoot>


 <tr>


 <td id="spacer"></td>


 </tr>


 </tfoot>


 <tbody>


 <tr>


 <td>


 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>



<div id="footer">


 PAGE FOOTER


</div>

这种方法的主要限制是它在打印作业的每个页面上放置一个相同的页脚, 这意味着你不能有任何页面具有不同的页脚或没有页脚 。 此外,由于spacer的高度取决于页脚的高度,如果页脚高度发生变化,您将不得不调整它。

56 1

如果你使用绝对或固定位置, 就无法在最后一页上设置页脚 。 如果只在页面不够长的情况下,底部需要页脚,请使用不需要绝对/固定位置的置顶页脚技术。 要做的这些工作如下批处理


html, body {


 height: 100%;


 margin: 0;


}


.wrapper {


 min-height: 100%;


 margin-bottom: -50px;


}


.footer,


.push {


 height: 50px;


}



如果你真的需要页脚底部的每一页, 那么我建议先生成 pdf,然后打印它。 如果你需要打印复杂的东西,那么你最终会首先生成 pdf print css非常有限

原作者:
...