在打印的特定页面的底部创建一个div

问题描述：

我有一个具有可变行数的表格。我想通过浏览器打印该表格。在它下面，有一个div应该保留在页面的底部。如果表格包含在第一页中，div将位于第一页的底部。如果表溢出到第二页，那么div会成为第二个页面的底部，等等，... 我的第一种方法是像我以前在HTML在打印的特定页面的底部创建一个div

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

这做处理呢不管用。页脚仍保留在第一页上。需要你的帮助，请！

编辑

我所做的表和页脚在父DIV，使他们能够循环。页脚将始终与表格的末尾位于同一页面上。对不起，我的不准确！

解决将帖子

我终于被周围的另一个DIV页脚和做一些CSS如下使它：

.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 */ 
    }

唯一剩下的问题是，当表完全一致的第一页：页脚被推到下一页，但显示在顶部:( 谢谢你所有的答案家伙！:)

答

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

它应该放在打印页面的底部，如果你设置了bottom: 0;

你”对了，但我忘了提及桌子和div循环！如果我将div设置为固定的，它将在文档的末尾与表的末尾不在同一页。 – Knighto05

不，如果您将div设置为固定，它将在所有页面的底部重复。但是，就我所知，您希望清除表格的其余部分，然后在此页面的底部打开页脚？在那之后，下一页是以新表开始的，它跨越了3页，因此3页还有下一页页脚？如我错了请纠正我。 – dolu92

是的，你懂了！我尝试了'position：fixed;'，它在第一次迭代中就像一个魅力一样，但是后来每一页都出现了页脚，直到最后。我不知道为什么！ – Knighto05

答

我让我的页脚粘在div的底部并遵循它。

如果我理解正确的话，你想要的页脚是在表的末尾，这里是我是如何做的：

#footer { 

    background-color: #333; 
    clear:both; 
    bottom: 0; 
    width: 1200px; 
    height: 50px; 
    margin: 0 auto; 
    border-radius:0px 0px 10px 10px; 
}

和页脚里面的paragraf：

#paragraf_1 { 
     display:block; 
    color:white; 
    text-align:bottom-left; 
    padding:14px 16px; 
    text-decoration:none; 
}

在打印的特定页面的底部创建一个div

相关推荐