【发布时间】：2021-03-14 00:59:22
【问题描述】：
尝试将 CSS @page 边距与固定位置的页眉和页脚结合使用。
目前的问题是@page 边距不允许固定位置元素显示超出这些边距。
下面的示例：一个网页，它生成 50 个随机大小的 lorem ipsum 文本段落来填充许多 8.5 x 11 打印的页面。
目标：让页眉和页脚出现在每个打印页面上由@page 定义的页边距之外。
问题：位于@page 边距之外的页眉和页脚被剪裁或消失。
注意：页面旨在与 Google Chrome 上的 MacOS 兼容。 页眉/页脚问题仅适用于印刷媒体，不适用于屏幕。
<!doctype><html lang="en">
<head>
<style media="screen">
.Header, .Footer{
display:none;
}
</style>
<style media="print">
@page{
size: letter;
margin:1in;
}
.Paragraph{
font-family:Courier;
font-size:12pt;
margin:10px 0px;
text-indent: 1em;
page-break-inside:auto;
}
.Header{
position:fixed;
font-size:1.5em;
top:-12px; /*Negative values push the header into the top margin where it gets clipped*/
left:0;
}
.Footer{
position:fixed;
font-size:1.5em;
bottom:-12; /*Negative values push the footer into the bottom margin where it gets clipped*/
left:0;
}
</style>
<script>
window.onload=PageGenerator;
function PageGenerator(){ //Generates pages of paragraphs at randomized length.
var loremFull, loremPartial, loremCount, pCount, contentDiv, thisP;
loremFull="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis maximus ante. Nullam aliquet sem metus, ac sollicitudin lacus eleifend at. Donec mattis lacus ut malesuada rutrum. Suspendisse ac sapien et erat efficitur feugiat. Vestibulum condimentum nisl vehicula mauris dignissim fermentum. Curabitur vitae metus non lorem pretium vulputate tempor at ex. Duis sit amet libero non felis consequat semper vitae vel elit. Proin eget eros aliquet, suscipit nunc ac, porta diam. Nam faucibus leo neque, consectetur molestie ipsum vehicula et. Cras nec elit nec nulla mollis vestibulum. Ut euismod neque id turpis suscipit, quis aliquet arcu consequat. Integer ac tincidunt arcu, nec posuere erat. Sed in risus vel massa maximus eleifend. Nulla elementum semper massa, vitae sagittis tellus fermentum vitae. Aenean quis fermentum metus. Aliquam erat volutpat.";
pCount=50;
contentDiv=document.querySelector(".Content");
for(let i=0; i<pCount; i++){
loremPartial=loremFull.split(". ");
loremCount=parseInt(Math.random() * loremPartial.length - 1) + 1;
loremPartial.splice(loremCount * -1);
loremPartial=loremPartial.join(". ") + ".";
console.log(loremCount);
thisP=contentDiv.appendChild(document.createElement("div"));
thisP.innerHTML=loremPartial;
thisP.className="Paragraph";
}
}
</script>
</head>
<body>
<div class="Header">header</div>
<div class="Footer">footer</div>
<div class="Content"></div>
</body>
</html>
【问题讨论】：
标签： html css printing margin css-paged-media