在打印html页面时向@page添加填充?

时间:2017-06-26 16:14:08

标签: html css

我想在每个页面上打印带页脚的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以使页脚不超过内容?

谢谢。

0 个答案:

没有答案