Question

我想打印多个页面，每个页面都有不同的页脚（即包含在父包装内）。我无法让它工作......第一页的页脚总是溢出所有其他页脚（因为固定的位置）...绝对定位会是最好的但是还有另一个问题...你不知道多长时间打印页面将不会始终位于页面的绝对末端。

这里的代码不起作用......

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不同等因素无法使用像素。

css固定位置页脚打印

1 个答案: