CSS PDF页面-标题与内容重叠 [英] css pdf page - header overlapping with content

问题描述

从图片中我们可以看到，我的内容与标题图片重叠，这是我拥有的代码:

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; 
}

这篇关于CSS PDF页面-标题与内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！