0

尝试将 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>
4

1 回答 1

0

页眉和页脚位于页边距框中。请参阅“分页媒体 CSS 简介”中的第 4 章页眉和页脚，可从https://www.antennahouse.com/css下载

于 2020-12-02T10:48:40.553 回答