我正面临从第 2 页向下的标题的内容重叠问题。我已经制作了标题 (position: fixed;) 以便在每个页面中仅显示一次声明。
如果我要使用@page margin，它会在页面周围添加边距，但不能解决重叠问题。使用@page margin 固定标题也随着内容向下移动。
我需要从标题到内容添加边距。
.header {
height: 50px;
width: 100%;
margin: 0 auto;
-webkit-print-color-adjust: exact;
}
.wrapper,
.wrapper-content {
width: 100%;
height: auto;
}
.wrapper-content img {
max-width: 100%;
}
@media print {
.header {
position: fixed;
padding: 0;
left: 0;
top: 0;
width: 100%;
display: table-header-group;
background-color: red;
color: #ffffff;
text-align: center;
}
}<body>
<div class="header">
<h3>Header Text</h3>
</div>
<div class="wrapper">
<div class="wrapper-content">
<h5>CSS Paged Media Module Level 3</h5>
<p>This CSS module specifies how pages are generated and laid out to hold fragmented content in a paged presentation. It adds functionality for controlling page margins, page size and orientation, and headers and footers, and extends generated content
to enable page numbering and running headers / footers. The process of paginating a flow into such generated pages is covered in [CSS3-BREAK].</p>
</div>
<div class="wrapper-content">
<h5>Status of this document</h5>
<img src="https://miro.medium.com/max/1838/1*MI686k5sDQrISBM6L8pf5A.jpeg" />
</div>
<div class="wrapper-content">
<h5>CSS Paged Media Module Level 3</h5>
<p>Paged media (e.g., paper, transparencies, photo album pages, pages displayed on computer screens as printed output simulations) differ from <a href="https://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a> in that the content
of the document is split into one or more discrete static display surfaces. To handle pages, CSS3 Paged Media describes how:</p>
<ul>
<li><a href="#page-breaks">page breaks</a> are created and avoided;
</li>
<li>the page properties such as size, orientation, margins, border, and padding are specified;
</li>
<li>headers and footers are established within the page margins;
</li>
<li>content such as page counters are placed in the headers and footers; and
</li>
<li>orphans and widows can be controlled.
</li>
</ul>
<p>This module defines a <a href="#page-model">page model</a> that specifies how a document is formatted within a rectangular area, called the <a href="#page-box-page-rule">page box</a>, that has finite width and height.</p>
<p>Although CSS3 does not specify how user agents transfer page boxes to sheets, it does include certain mechanisms for telling user agents about the intended page sheet <a href="#page-size">size and orientation</a>. In the general case, CSS3 assumes
that one page box will be transferred to one surface of similar size.
</p>
<p>The non-printable area is the area of a page sheet that a physical device such as a printer is not capable of marking reliably, usually due to the printer’s paper handling mechanism. This value is printer dependent and is usually a small region
along each edge of the page sheet. The printable area is the area of page sheet that a printer is capable of marking reliably. The size of the printable area is the size of the page sheet reduced by the size of the non-printable area. A user agent
may not know the dimensions of this area for a particular printing device; but when its dimensions are known, user agents may adjust the formatting of the document so that content falls within the printable area. How this adjustment is accomplished
is device dependent within the constraints expressed in the sections §7.4 Rendering page boxes that do not fit a page sheet and §3.2 Content outside the page box.</p>
</div>
<div class="wrapper-content">
<h5>Status of this document</h5>
<img src="https://miro.medium.com/max/1838/1*MI686k5sDQrISBM6L8pf5A.jpeg" />
</div>
<div class="wrapper-content">
<h5>Status of this document</h5>
<img src="https://miro.medium.com/max/1838/1*MI686k5sDQrISBM6L8pf5A.jpeg" />
</div>
</div>
</body>