CSS PDF页面-标题与内容重叠
问题描述:
从图片中我们可以看到,我的内容与标题图片重叠,这是我拥有的代码:
As we can see from the image my content overlaps with the header image and this is the code I have:
<style type="text/css" media="print">
@page {
/*size:landscape;*/
@top-center {
content: element(header);
}
@bottom-left {
content: element(footer);
}
}
div.header {
padding: 10px;
position: running(header);
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
</style>
</head>
<div class="header">
<img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">
</div>
附言::请不要重复填写此问题,因为我已经搜索了与同一问题相关的所有问题,但由于涉及PDF,我的问题看起来有所不同.
P.S.: Please don't close this question as duplicate as I have already searched all the questions related to the same but mine looks different as PDF is involved.
答
页眉和页脚在页边距内建立.
Headers and footers are established within the page margins.
因此解决方案是增加页面的上边距,例如:
So the solution is to increase the page top margin, for example:
@page {
margin-top: 50mm;
}