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

我试图在页面底部打印一张带有图片的完整页面（无边距）网页。但是，由于底部位于页面底部以下，图片未打印。我需要更改要打印的图片？ 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; 
}

来源

2014-05-22 Torstein I. Bø

设置图像以'位置是：固定; bottom：0;' – Adjit

我用它来打印地图，位置需要是绝对的，才能正确放置图块。至少这是我知道的唯一解决方案，但欢迎其他建议！ –

的解决方案是在位置到IMG-元件：

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

来源

2014-05-26 13:34:19

而不是让你的图片有

position: absolute;

让他们，而不是有

position: fixed; 
bottom: 0;

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

希望有帮助！

来源

2014-05-22 22:48:26 Tensai

感谢您的帮助！但这不是我想要的。我使用它来打印地图，因此会有一些图像正在越过边界。我看不出我如何使用固定位置来处理这种情况。 –

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

回答

相关问题