我想在每个页面上打印带页脚的html页面,动态加载数据。
问题是,页面内容与页脚重叠。我知道这是因为我在页脚上使用了position:fixed
。
这是我的css。
@media print {
page[size="A4"] {
width: 21cm;
height: 28.7cm;
padding: 0 0 0 0;
page-break-before: always;
}
.print {display : block;}
footer {
position: fixed;
bottom: 0;
}
}
@page {
margin-bottom: 0.3cm;
}
Html代码
<body>
<button class="print">Print</button>
<page>
<p>Some very long text here.</p>
</page>
<footer>
<img scr="img/contact.jpg"></img>
</footer>
</body>
是否可以添加填充@page
以使页脚不超过内容?
谢谢。