css pdf page - 与内容重叠的标题

Question

正如我们从图像中看到的那样,我的内容与标题图像重叠,这就是我的代码:

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

PS:请不要将此问题视为重复,因为我已经搜索了与此相关的所有问题,但我的内容看起来与PDF有所不同.

Answer 1

页眉和页脚是在页边距内建立的.

所以解决方案是增加页面上边距,例如:

@page {
        margin-top: 50mm; 
}