css固定位置页脚打印

Question

我想打印多个页面，每个页面都有不同的页脚(即包含在父包装中)。我不能让它从第一页的work...the页脚总是溢出其他页脚(因为固定的位置)…绝对定位是最好的，但还有另一个问题……您无法判断打印页的长度，因此它不会始终定位在页面的绝对末尾。

下面是不起作用的代码。

HTML

<div id="wrap">
        <div class="print1">
            <div class="foot">
                foot 1
            </div>
        </div>
        <div class="page-break"></div>
        <div class="print2">
            <div class="foot">
                foot 2
            </div>
        </div>
        <div class="page-break"></div>
        <div class="print3">
            <div class="foot">
                foot 3
            </div>
        </div>
        <div class="page-break"></div>
    </div>

CSS

    #wrap{
height:400px;
width:100%;
}
.print1,.print2,.print3{
height:200px;
border-bottom:1px solid #000;
}
.foot{
display: block;
width:100%;
position:fixed;
bottom:0;
margin-top:-54px;
height:54px;
}
.page-break{
display:block;
page-break-before:always
}

没有JS，这是可能的吗？

编辑: z-index没有帮助...

谢谢!

Answer 1

要解决由于位置原因导致它们不能相互显示的问题，请执行以下操作：您可以执行以下操作：

.print1,.print2,.print3
{
  position: relative;
  height: 11in;
  border-bottom: 1px solid #000;
  page-break-inside: avoid;
}
.foot
{
  display: block;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 1in;         
}

将父div设置为相对的，而将脚注设置为绝对的，可以确保脚注位于每个父div的底部。

为了确保它位于页面的底部，我们只需提供页面的大小(每个容器.print1，print2 ...)单位为英寸。由于屏幕分辨率不同、dpi不同等等原因，像素不能使用。