html - 正文中有动态数据时如何在LAST页面底部放置页脚

Question

我正在尝试创建一个要求页脚必须放在最后一页底部的报告。报告正文根据从数据库返回的记录数动态加载。报告可以是 1 页或更多。

我尝试使用粘性页脚，这对于在网站上查看 HTML 是可以的，但是当报告的长度大于 1 页并且查看打印预览屏幕时，页脚与报告的正文和页脚重叠保留在第一页而不是移动到最后一页。

有没有人知道在创建可打印屏幕时在最后一页底部放置页脚的方法，该屏幕的格式正确，用户可以在不使用粘性页脚的情况下打印。

当有多个页面要打印时，我实现的粘性页脚在打印预览屏幕中无法正确显示。

Answer 1

CSS

#sticky-footer 
{
    position: fixed;
    bottom: 0px;
}
@media print 
{
    #sticky-footer 
    {
        position: static;
        bottom: auto;
    }
}

HTML

<div id="report-content">...</div>
<div id="sticky-footer">...</div>