Trying to combine the use of CSS @page margins with fixed-position headers & footers.
The problem so far is that @page margins do not allow fixed position elements to display beyond those margins.
Example Below: A web page that generates a 50 randomly-sized paragraphs of lorem ipsum text to fill out a number of 8.5 x 11 printed pages.
Goal: To get the headers and footers to appear outside the margins defined by @page on every printed page.
Problem: Headers and footers positioned outside the @page margins are clipped or disappear.
Note: Page was designed for compatibility with MacOS on Google Chrome. The headers/footers issue only applies to printed media, not screens.
<!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>
Headers and footers go in the page-margin boxes. See Chapter 4, Headers & Footers, in "Introduction to CSS for Paged Media" downloadable from https://www.antennahouse.com/css