在打印时在特定页面的底部创建一个 div [英] make a div at the bottom of a specific page on printing

问题描述

我有一个行数可变的表.我想通过浏览器打印该表.在它下面，有一个 div 应该保留在页面底部.如果表格包含在第一页中，则 div 将位于第一页的底部.如果表格溢出到第二页，则 div 将成为第二页的底部，依此类推，...我的第一种方法是像以前在 HTML 中那样处理它

I have a table with variable number of rows. I want to print that table via browsers. Below it, there's a div that should remain at the bottom of the page. If the table is contained in the first page, the div will be at bottom of the first page. If the table overflow to the second page, the div will be a the bottom of the second page and so on,... My first approach was to handle it like I used to do in HTML

.footer{
   width: 100%;
      position: absolute;
      bottom: 0;
      font-size: 10pt;
 }

这不起作用.页脚保留在第一页.需要你的帮助，请！

This is not working. the footer remain on the first page. Need your help, please!

编辑

我在父 div 中制作了表格和页脚，以便它们可以循环.页脚将始终与表格的末尾位于同一页面上.抱歉，我的不准确！

I made the table and the footer in a parent div so that they can loop. A footer will always be on the same page as the end of a table. Sorry, for my inaccuracy!

已解决[已编辑]

我终于通过用另一个 div 包围页脚并按如下方式做一些 CSS 来实现的:

I finally made it by surrounding the footer by another div and doing some CSS as follow:

.table{
        min-height: 20cm !important;/* Define height for the table in cm or mm (I encountered a problem with px and %) */
        display: block;
        position: relative;
        width: 100% !important;
    }
    .footer{
        width: 100%;
        position: relative;
        margin-bottom: 0 !important;
        font-size: 10pt;
        page-break-inside: avoid !important;
        page-break-before: auto !important; /* this pushes the footer to the bottom of next page if table overflows to another page */
    }

剩下的唯一问题是当表格与第一页完全匹配时:页脚被推到下一页但显示在顶部:(谢谢大家的回答！:)

The only remaining problem is when the table matches exactly the first page: the footer is pushed to the next page but is displayed on the top :( Thank you for all of your answers guys! :)

推荐答案

尝试使用position:fixed;到这个div.

如果你设置了bottom: 0;

这篇关于在打印时在特定页面的底部创建一个 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！