在CSS页脚之前裁剪页面

Question

Stackoverflow中已经回答了这个问题。但我很感激有人可以为我提供解决方案。

我尝试使用CSS和HTML创建PDF。我添加了一个页脚。

@page {
       @bottom-left {content: element(footer);}
       size:A4 portrait;
       margin-left: 0;
       margin-right: 0;
       margin-top: 0;
}

div.footer {
            display: block;
            position: running(footer);
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 5;
           }

 <div class="footer" style="padding-left: 1.7cm;">
      MY FOOTER
</div>

这会正确呈现页脚，但页面内容也会重叠。如何避免重叠并在下一页显示溢出内容？

Answer 1

从页脚中移除固定位置并在页面

添加页边距

@page {
       @bottom-left {content: element(footer);}
       size:A4 portrait;
       margin: 0 0 5cm 0;
    }

div.footer {
             display: block;
             position: running(footer);
             z-index: 5;
            }