Question

我试图在页面底部打印一张带有图片的整页（无边距）网页。但是由于底部低于页面底部，因此不会打印图片。对于要打印的图片，我需要更改什么？ Demo

HTML：

<div class="page" id="container" style="position:absolute;top:0;left:0;overflow: hidden;width:210mm;height:297mm;">
<div style="position: absolute; top: 130mm; left: 50mm;">
 <img src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg" style="width: 100mm; height: 100mm;"></img>
</div>
<div style="position: absolute; top: 230mm; left: 50mm;">
 <img src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg" style="width: 100mm; height: 100mm;"/>
</div>
</div>

CSS：

body {
    margin: 0;
    padding: 0;
}

.page {
    width: 21cm;
    min-height: 29.7cm;
}

Answer 1

而不是让你的图像有

position: absolute;

让他们改为

position: fixed;
bottom: 0;

通过将其位置设置为固定，您告诉浏览器在给定坐标的窗口内始终具有该对象。绝对定位本质上也是固定的，但它不是相对于浏览器窗口而是相对于整个网页。

希望有所帮助！

Answer 2

解决方案是img-element的位置：

position: absolute;
top: 0;
left: 0;

这样：

<div style="position: absolute; top: 230mm; left: 50mm;">
  <img src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg" style="width: 100mm; height: 100mm;position:absolute;top:0;left:0;"/>
</div>

Demo

在页面底部打印带有图像的整页网页

2 个答案: