页边距和背景图像

页边距和背景图像

关注
发信
关注(28)粉丝(399)

页边距和背景图像

本文介绍了页边距和背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我试图创建一个HTML文档，以便自动使用CSS设置样式，并轻松生成PDF文件（直到现在，我一直在使用Chrome，但我正在考虑基于WKHTML2PDF的解决方案）。这是我迄今为止创建的结构： < body class =preview> < main class =document> < div class =page> < div class =text-flow-page-content><！ - < p>页面内容... - >< / div> < / div> < div class =page with-column-separator> < div class =simple-page-column><！ - < p>页面内容... - >< / div> < div class =simple-page-column><！ - < p>页面内容... - >< / div> < / div> < div class =带有色带的页面> < div class =text-flow-page-content><！ - < p>页面内容... - >< / div> < / div> < / main> < / body> 形成SCSS观点： .preview 是顶级容器;它包含页面以及一个JS快速主题切换器。 .document 是所有页面的容器; @media print {.preview> *：not（.document）{display：none; .page 表示单个页面;}} 表示单个页面;每个页面都可以通过添加装饰类来进行单独定制（例如： .with-ribbon 或 .with-column-separator ％page-content 以及扩展它的所有内容（ text-flow-page-content 和 simple-page-column ）代表页面内容。 呈现如下所示： + ---------- -------------- + | PP | | + -------------- + | | | + ---- + | | | | | CT | | | | | | CT | | | | PP | CM | CT | CM | PP | | | | CT | | | | | | .. | | | | | + ---- + | | | + -------------- + | | PP | + ------------------------ + 其中： PP 代表 Page Padding，即 .page {padding：... 。 CM 表示内容边距，即 .simple-page-column {margin：... 适用时。 CT 代表Content Text，即< div class =简单页面列>< p>内容文字... 。 您的生活可能已经足够了。当页面溢出时，我遇到了一些小问题：页面填充不适用： 当然，我可以使用页边距设置 @page {margin：... 页 background-image 由 .page.with-ribbon 装饰类初始化！ 因此，我的问题是：如何应用我的页面填充而不转动部分背景变成肮脏的白色中风？ 编辑：下面是一个演示（可运行的演示似乎不打印所以我认为给代码提供一个完整的文件会更好）： <！DOCTYPE html> < html lang =en> < head> < meta charset =UTF-8/> < title>列印我< / title> < style> @media screen { .preview {background：#DDD; } .preview .page { margin：20pt auto; 宽度：21cm; 最低身高：29.7cm; background-color：#FFF; } } @media print {.preview> *：not（.document）{display：none; }} @page {margin：0; } .page { display：flex; 填充：0.78in; background-image：url（https://i.stack.imgur.com/2q5wa.png）; 背景重复：不重复; 背景位置：-10pt 10pt; 背景大小：6cm; page-break-before：always; page-break-inside：avoid; page-break-after：always; } .text-flow-page-content {flex：1; } < / style> < / head> < body class =预览> < main class =document> < div class =page> < div class =text-flow-page-content> < h1>简易网页< / h1> < h4>页面？打印全部！< / h4> < p> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Ut ac quam dictum，mollis dui et，blandit est。Proin et consectetur quam。< / p> < / div> < / div> < div class =page> < div class =text-flow-page-content> < h1>溢出页面< / h1> < p> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Ut ac quam dictum，mollis dui et，blandit est。Proin et consectetur quam。 Vivamus non vulputate mi et et scerisque mi。 Curabitur orci mi，dignissim eget faucibus pulvinar，tristique nec lacus。 Suspendisse lobortis nec odio坐amet volutpat。在faucibus orci luctus et ultrices posuere cubilia Curae中的Vestibulum ante ipsum primis; Vestibulum tempor nisi nisl，ut porttitor risus blandit non。每个conubia nostra，每个inceptos himenaeos班级taciti sociosqu广告litora扭矩。 Donec est ligula，aliquam坐amet pretium v​​ehicula，ultrices non nulla。 Vivamus tristique hendrerit tincidunt。 Nunc eu lorem accumsan，accumsan risus quis，aliquam erat。 Praesent ut maximus tortor，vitae scelerisque nisl。 Vivamus tellus nibh，magna eu的rutrum，gravida pulvinar felis。< / p> < p> Vivamus sodales vel sem坐amet feugiat。 Maecenas consectetur auctor bibendum。 Nunc ac vestibulum augue。 Aliquam eget sollicitudin dui，mattis auctor augue。这种情况可能会导致严重的后果。 Nunc dignissim lectus id ligula facilisis tincidunt。 Pellentesque ullamcorper malesuada lectus。 Vestibulum lacinia，ipsum ultrices mattis porttitor，justo urna dictum quam，在suscipit lectus velit velros中。 Vivamus vehicula，lorem eu tincidunt malesuada，lectus mauris ornare lectus，nec viverra nisl ligula nec metus。 Etiam malesuada ultrices feugiat。 Vestibulum sollicitudin pulvinar orci eu imperdiet。 Ut quis lectus vel ante con ele elendnd。 Nunc ac odio risus。 quisque at suscipit lectus，aliquam cursus lectus。 Pellentesque condimentum tellus vitae purus elementum posuere。 Aliquam laoreet arcu lectus，vel vehicula arcu lobortis ac。< / p> < p> fusce坐在amet前面amet enim dictum ornare。 Praesent urna libero，vulputate quis facilisis id，pharetra non augue。 Praesent porta ligula vel fermentum elementum。在volutpat libero massa，sed ornare lectus porttitor id。 Fusce malesuada venenatis turpis，sed posuere risus sodales quis。 Aliquam pretium sollicitudin massa，sollicitudin mi volutpat at。 Integer accumsan，sapien quis congue luctus，elit magna semper quam，et vulputate lorem tellus nec urna。 Cras调味品效果质量标准。 Nulla et auctor libero，id pretium sem。 Donec ante nibh，iaculis id egestas vitae，fringilla id neque。 Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Nam maximus tempor pellentesque。 Donec收集finibus malesuada。 Aenean vitae lorem interdum，scelerisque turpis nec，semper sapien。< / p> < p> Nunc non fringilla sapien，quis tincidunt turpis。每个conubia nostra，每个inceptos himenaeos班级taciti sociosqu广告litora扭矩。 Nulla facilisi。 Nullam ultrices ullamcorper tempus。 Proin一个大宗商品。 Phasellus auctor tortor一个neque elementum luctus。 Quisque venenatis turpis nisl，vel lacinia metus faucibus a。 Donec diam arcu，vestibulum auctor dui tincidunt，euismod luctus massa。 Nullam sed rutrum mauris，porta interdum velit。 Maecenas sodales vel nunc vel sodales。 Integer ultricies elit vel iaculis mollis。 U le est lob lob lob lob curs curs curs curs curs curs curs curs curs curs curs curs curs us Fusce blandit augue tempus viverra tempor。< / p> < p> maecenas在scelerisque tortor，ut suscipit lectus。 Pellentesque et tortor consequat，faucibus dolor vitae，iaculis lectus。 Donec tempus，urna in tincidunt pellentesque，lectus dolor semper velit，eget aliquet nisi arcu in velit。 Nulla dignissim eget nunc ut faucibus。 Nunc pulvinar justo eget mauris semper commodo。 Maecenas eu dapibus elit。 Duis sodales在eros坐amet scelerisque。 Fusce nisl lacus，scelerisque vestibulum enim et，placerat finibus augue。 Nunc lacinia dui eu elit consequat，eget consequat risus volutpat。 Nulla vestibulum lobortis est vitae pharetra。< / p> < p> Mauris cursus，lacus sed consequat tempus，erat tortor auctor justo，ut venenatis metus erat vitae nunc。 Pellentesque porta ex eget mattis eleifend。 Mauris累积turoris tortus，maximus volutpat quam cursus vel。 Nullam rutrum sed ipsum vitae dictum。 Sed dapibus quis urna quis vulputate。 Vivamus在augue ut mauris vehicula finibus。 Nulla nec mattis massa。< / p> < p> Sed商业不可预知。 Sed ultricies justo ante，vel ornare dolor tempus vitae。在hac cubasse platea中最明显。暂停一个sodales magna，et consectetur nisi。 Vivamus tincidunt，orci eget porttitor viverra，augue libero cursus metus，坐在amet molestie metus nibh ullamcorper ex。 Donec quis risus et lectus auctor rhoncus eu id quam。 Donec mollis arcu est。Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ante nisi，不可侵犯，不论是否属于自然。 Curabitur non justo non magna rutrum vulputate et in ligula。< / p> < p> Vestibulum viverra，quam eget dapibus porttitor，dui massa auctor velit，vitae finibus nisi mauris a urna。 Nulla iaculis purus坐在amet dapibus pharetra。 Fusce sollicitudin luctus odio placerat congue。 Pellentesque栖息地morbi tristique senectus et netus et malesuada fames ac turpis egestas。 Duis pellentesque，velit sed eleifend ullamcorper，velit orci posuere enim，一个商业马萨前狮子座。 Nullam rutrum nulla in dolor scelerisque，non lobortis nulla lobortis。 Etiam hendrerit purus vitae leo imperdiet vehicula。 Nulla ac nisl at magna placerat dapibus。 Proin ex est，suscipit ac ex，commodo convallis nisl。 Cras sed leo eu erat suscipit dapibus。 Quisque sed justo sed mi tempus mattis。< / p> < p> Nullam累积了越来越高的价值。 Fusce mollis pretium luctus。 Nulla ut diam eu sem blandit scelerisque。整数ac tempor quam。 Praesent euismod orci mi，vitae volutpat libero iaculis eu。 Nunc fringilla vulputate laoreet。 Vestibulum的调味品最初是等分的。 Cras feugiat，一个fringilla posuere，ligula arcu consequat lacus，一个vestibulum lectus lectus a neque。暂停效力。 Curabitur non sollicitudin ante。 Nullam convallis neque egestas auctor vehicula。 Sed nec laoreet enim，一个volutpat sem。< / p> < p> Mauris pellentesque fermentum nibh，这是一个普林顿语形容词。在这里，你可以在布兰迪尼克尼斯尼斯的justo上找到它。如果没有，请坐在amet feugiat leo egestas上。 Praesent porttitor，augue non sagittis elementum，odio turpis luctus nisi，at elementum odio nulla molestie elit。 Nunc eget arcu bibendum，gravida eros ac，condimentum lorem。 Aliquam scelerisque mi quis urna venenatis，fermentum mollis lacus efficitur。 Aliquam aliquet quis dolor pulvinar ullamcorper。非常重要的，有趣的调味品。 Etiam egestas cursus sem，et sodales felis pellentesque sodales。 Morbi dapibus accumsan erat，ut luctus sapien consequat feugiat。 Nulla eu euismod ex，nec commodo est。Etiam ultrices tincidunt nulla vel sodales。< / p> Vivamus egestas，metus et vehicula facilisis，nisi diam dictum nisi，eget suscipit tortor ligula at mauris。 Nunc malesuada nisi quis ligula volutpat egestas。 Aliquam blandit ut velit a molestie。 Sed eu dictum orci。 Etiam同意Purus坐amet luctus tempus。 Nullam增加了mauris，posuere ut等于pulvinar，posuere et augue。 Morbi urna est，cursus ut erat at，tristique ultricies velit。< / p> < p> Nulla facilisis vehicula eros，vitae venenatis eros consequat id。 Nam dapibus lacus tellus，quis porttitor justo feugiat semper。 Maecenas vel tellus enim。 Duis sed elit dui。 Nulla商品或服务，或非犹太人。 Aliquam consectetur，sem ac aliquam molestie，lectus nulla porta urna，suscipit maximus nunc eros id dui。 Donec eu nulla eu ipsum placerat tristique eget in massa。 Sed fringilla quam vel nisi interdum luctus in vel magna。 Vivamus dictum，nulla nec ullamcorper euismod，mauris mi bibendum mi，nec ultrices leo turpis sed tortor。< / p> < / div> < / div> < / main> < / body> < / html> 尝试打印它。问题出现在第2页和第3页之间：打印时，页面垂直（顶部和底部）边距不适用于内容溢出并触发分页符。 解决方案我终于选择了基于JS的解决方案;请评价我的代码，它使用我的问题的第一个代码块中呈现的HTML结构： const MAX_PAGE_CONTENT_HEIGHT = 972.34 常量MAX_PAGE_CONTENT_HEIGHT_WITH_RIBBON = 934.80 常量PAGE_BREAK_CLASS =计算页面中断常量RIBBON_DECORATION_CLASS =with-ribbon （常量page文档内容.getElementsByClassName（'text-flow-page-content'））{ let firstPage = true let currentPageContentHeight = 0 let previousElementMarginBottom = 0 （pageContent.children的常量元素）{ //计算元素高度。 const elementStyle = getComputedStyle（element） // Hack：'保留边缘合并的cuz，最大保证金必须选择 //在这个元素的上边距和上一个边界之间一个人的底部边缘。 const elementFullHeight = parseFloat（elementStyle.height）+ Math.max（ parseFloat（elementStyle.marginTop）， parseFloat（previousElementMarginBottom）） previousElementMarginBottom = parseFloat（elementStyle.marginBottom） //模拟将元素插入到虚拟页面 //并查看它是否使内容高度超过最大值。 if（（ //特殊处理：由于装饰而在第一页上额外保证金 firstPage&& pageContent.parentElement.classList.contains（RIBBON_DECORATION_CLASS）& amp; ;& currentPageContentHeight + elementFullHeight> MAX_PAGE_CONTENT_HEIGHT_WITH_RIBBON ）||（ currentPageContentHeight + elementFullHeight> MAX_PAGE_CONTENT_HEIGHT ））{ //在这种情况下： // - 重置虚拟页面; // - 放一个分页符; // - 将元素添加到新的虚拟页面。 firstPage = false element.classList.add（PAGE_BREAK_CLASS） currentPageContentHeight = elementFullHeight } else { //否则，只需将元素添加到虚拟页面。 currentPageContentHeight + = elementFullHeight } } } 注意：只要说 .page.with-ribbon 修饰类添加了背景图片和一个额外的页边空白。 。我发布的代码考虑到了这一点，任何人都可能发现它没用。 I'm trying to create an HTML document in order to automatically style it with CSS and easily generate PDF files from it (until now, I've been using Chrome but I'm thinking about a WKHTML2PDF-based solution). Here is the structure I've created so far:<body class="preview"> <main class="document"> <div class="page"> <div class="text-flow-page-content"><!-- <p>Page content... --></div> </div> <div class="page with-column-separator"> <div class="simple-page-column"><!-- <p>Page content... --></div> <div class="simple-page-column"><!-- <p>Page content... --></div> </div> <div class="page with-ribbon"> <div class="text-flow-page-content"><!-- <p>Page content... --></div> </div> </main></body>Form the SCSS view-point:.preview is the top-level container; it contains the pages as well as a JS quick theme switcher..document is a container for all the pages; @media print { .preview > *:not(.document) { display: none; } } makes it the only element to be eventually printed..page represents a single page; each page can be individually customized by adding decoration classes (for instance: .with-ribbon or .with-column-separator).%page-content and everything that extends it (text-flow-page-content and simple-page-column for instance) represents the content of a page.Which renders something like this:+------------------------+| PP || +--------------+ || | +----+ | || | | CT | | || | | CT | | || PP | CM | CT | CM | PP || | | CT | | || | | .. | | || | +----+ | || +--------------+ || PP |+------------------------+Where:PP stands for "Page Padding", i.e. .page { padding: ....CM stands for "Content Margin", i.e. .simple-page-column { margin: ... when applicable.CT stands for "Content Text", i.e. <div class="simple-page-column"><p>Content Text....You've probably had enough of my life. I'm encountering a little pitfall when it comes to page overflowing: the page paddings don't apply:Of course, I could have used the page margins setting @page { margin: ... but it crops the page background-image initialized by the .page.with-ribbon decoration class!Hence my question: How can I apply my page padding without turning a part of the background into a filthy white stroke?EDIT: Here is a demo (runnable demos don't seem to "print" very well, so I thought it would be better to give the code for a complete file):<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Print me</title> <style> @media screen { .preview { background: #DDD; } .preview .page { margin: 20pt auto; width: 21cm; min-height: 29.7cm; background-color: #FFF; } } @media print { .preview > *:not(.document) { display: none; } } @page { margin: 0; } .page { display: flex; padding: 0.78in; background-image: url("https://i.stack.imgur.com/2q5wa.png"); background-repeat: no-repeat; background-position: -10pt 10pt; background-size: 6cm; page-break-before: always; page-break-inside: avoid; page-break-after: always; } .text-flow-page-content { flex: 1; } </style> </head> <body class="preview"> <main class="document"> <div class="page"> <div class="text-flow-page-content"> <h1>Simple Page</h1> <h4>Pages? Gotta print them all!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac quam dictum, mollis dui et, blandit est. Proin et consectetur quam.</p> </div> </div> <div class="page"> <div class="text-flow-page-content"> <h1>Page with Overflow</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac quam dictum, mollis dui et, blandit est. Proin et consectetur quam. Vivamus non vulputate mi, et scelerisque mi. Curabitur orci mi, dignissim eget faucibus pulvinar, tristique nec lacus. Suspendisse lobortis nec odio sit amet volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tempor nisi nisl, ut porttitor risus blandit non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec est ligula, aliquam sit amet pretium vehicula, ultrices non nulla. Vivamus tristique hendrerit tincidunt. Nunc eu lorem accumsan, accumsan risus quis, aliquam erat. Praesent ut maximus tortor, vitae scelerisque nisl. Vivamus tellus nibh, rutrum at magna eu, gravida pulvinar felis.</p> <p>Vivamus sodales vel sem sit amet feugiat. Maecenas consectetur auctor bibendum. Nunc ac vestibulum augue. Aliquam eget sollicitudin dui, mattis auctor augue. Ut ultricies sit amet augue et sagittis. Nunc dignissim lectus id ligula facilisis tincidunt. Pellentesque ullamcorper malesuada lectus. Vestibulum lacinia, ipsum ultrices mattis porttitor, justo urna dictum quam, in suscipit lectus velit vel eros. Vivamus vehicula, lorem eu tincidunt malesuada, lectus mauris ornare lectus, nec viverra nisl ligula nec metus. Etiam malesuada ultrices feugiat. Vestibulum sollicitudin pulvinar orci eu imperdiet. Ut quis lectus vel ante congue eleifend. Nunc ac odio risus. Quisque at suscipit lectus, aliquam cursus lectus. Pellentesque condimentum tellus vitae purus elementum posuere. Aliquam laoreet arcu lectus, vel vehicula arcu lobortis ac.</p> <p>Fusce sit amet ex sit amet enim dictum ornare. Praesent urna libero, vulputate quis facilisis id, pharetra non augue. Praesent porta ligula vel fermentum elementum. In volutpat libero massa, sed ornare lectus porttitor id. Fusce malesuada venenatis turpis, sed posuere risus sodales quis. Aliquam pretium sollicitudin massa, a sollicitudin mi volutpat at. Integer accumsan, sapien quis congue luctus, elit magna semper quam, et vulputate lorem tellus nec urna. Cras condimentum efficitur massa id dignissim. Nulla et auctor libero, id pretium sem. Donec ante nibh, iaculis id egestas vitae, fringilla id neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam maximus tempor pellentesque. Donec accumsan finibus malesuada. Aenean vitae lorem interdum, scelerisque turpis nec, semper sapien.</p> <p>Nunc non fringilla sapien, quis tincidunt turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nullam ultrices ullamcorper tempus. Proin a commodo sapien. Phasellus auctor tortor a neque elementum luctus. Quisque venenatis turpis nisl, vel lacinia metus faucibus a. Donec diam arcu, vestibulum auctor dui tincidunt, euismod luctus massa. Nullam sed rutrum mauris, porta interdum velit. Maecenas sodales vel nunc vel sodales. Integer ultricies elit vel iaculis mollis. Ut lectus est, lobortis ut turpis a, cursus pulvinar dui. Fusce blandit augue tempus viverra tempor.</p> <p>Maecenas in scelerisque tortor, ut suscipit lectus. Pellentesque et tortor consequat, faucibus dolor vitae, iaculis lectus. Donec tempus, urna in tincidunt pellentesque, lectus dolor semper velit, eget aliquet nisi arcu in velit. Nulla dignissim eget nunc ut faucibus. Nunc pulvinar justo eget mauris semper commodo. Maecenas eu dapibus elit. Duis sodales at eros sit amet scelerisque. Fusce nisl lacus, scelerisque vestibulum enim et, placerat finibus augue. Nunc lacinia dui eu elit consequat, eget consequat risus volutpat. Nulla vestibulum lobortis est vitae pharetra.</p> <p>Mauris cursus, lacus sed consequat tempus, erat tortor auctor justo, ut venenatis metus erat vitae nunc. Pellentesque porta ex eget mattis eleifend. Mauris accumsan tortor turpis, maximus volutpat quam cursus vel. Nullam rutrum sed ipsum vitae dictum. Sed dapibus quis urna quis vulputate. Vivamus at augue ut mauris vehicula finibus. Nulla nec mattis massa.</p> <p>Sed commodo nec diam nec hendrerit. Sed ultricies justo ante, vel ornare dolor tempus vitae. In hac habitasse platea dictumst. Suspendisse a sodales magna, et consectetur nisi. Vivamus tincidunt, orci eget porttitor viverra, augue libero cursus metus, sit amet molestie metus nibh ullamcorper ex. Donec quis risus et lectus auctor rhoncus eu id quam. Donec mollis arcu est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ante nisi, suscipit non nisl ut, facilisis pretium eros. Curabitur non justo non magna rutrum vulputate et in ligula.</p> <p>Vestibulum viverra, quam eget dapibus porttitor, dui massa auctor velit, vitae finibus nisi mauris a urna. Nulla iaculis purus sit amet dapibus pharetra. Fusce sollicitudin luctus odio placerat congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis pellentesque, velit sed eleifend ullamcorper, velit orci posuere enim, a commodo massa ex a leo. Nullam rutrum nulla in dolor scelerisque, non lobortis nulla lobortis. Etiam hendrerit purus vitae leo imperdiet vehicula. Nulla ac nisl at magna placerat dapibus. Proin ex est, suscipit ac ex in, commodo convallis nisl. Cras sed leo eu erat suscipit dapibus. Quisque sed justo sed mi tempus mattis.</p> <p>Nullam accumsan eros neque, vel ornare odio convallis accumsan. Fusce mollis pretium luctus. Nulla ut diam eu sem blandit scelerisque. Integer ac tempor quam. Praesent euismod orci mi, vitae volutpat libero iaculis eu. Nunc fringilla vulputate laoreet. Vestibulum condimentum ut ante eu aliquam. Cras feugiat, diam a fringilla posuere, ligula arcu consequat lacus, a vestibulum lectus lectus a neque. Suspendisse efficitur semper placerat. Curabitur non sollicitudin ante. Nullam convallis neque egestas auctor vehicula. Sed nec laoreet enim, a volutpat sem.</p> <p>Mauris pellentesque fermentum nibh, a pretium turpis dictum in. Pellentesque sed sapien pharetra, lobortis ex at, auctor quam. Phasellus tristique, ex vel eleifend sagittis, nisi nunc malesuada leo, at blandit neque nisl in justo. Phasellus tincidunt odio ut libero blandit, sit amet feugiat leo egestas. Praesent porttitor, augue non sagittis elementum, odio turpis luctus nisi, at elementum odio nulla molestie elit. Nunc eget arcu bibendum, gravida eros ac, condimentum lorem. Aliquam scelerisque mi quis urna venenatis, fermentum mollis lacus efficitur. Aliquam aliquet quis dolor pulvinar ullamcorper. Ut non ornare felis, eget condimentum orci. Etiam egestas cursus sem, et sodales felis pellentesque sodales. Morbi dapibus accumsan erat, ut luctus sapien consequat feugiat. Nulla eu euismod ex, nec commodo est. Etiam ultrices tincidunt nulla vel sodales.</p> <p>Vivamus egestas, metus et vehicula facilisis, nisi diam dictum nisi, eget suscipit tortor ligula at mauris. Nunc malesuada nisi quis ligula volutpat egestas. Aliquam blandit ut velit a molestie. Sed eu dictum orci. Etiam congue purus sit amet luctus tempus. Nullam augue mauris, posuere ut aliquet pulvinar, posuere et augue. Morbi urna est, cursus ut erat at, tristique ultricies velit.</p> <p>Nulla facilisis vehicula eros, vitae venenatis eros consequat id. Nam dapibus lacus tellus, quis porttitor justo feugiat semper. Maecenas vel tellus enim. Duis sed elit dui. Nulla commodo erat blandit orci tempor, non sagittis tellus imperdiet. Aliquam consectetur, sem ac aliquam molestie, lectus nulla porta urna, suscipit maximus nunc eros id dui. Donec eu nulla eu ipsum placerat tristique eget in massa. Sed fringilla quam vel nisi interdum luctus in vel magna. Vivamus dictum, nulla nec ullamcorper euismod, mauris mi bibendum mi, nec ultrices leo turpis sed tortor.</p> </div> </div> </main> </body></html>Try to print it. The problem is between pages 2 and 3: when printing, the page vertical (top & bottom) margin don't apply when the content overflows and triggers a page break. 解决方案 I've finally opted for the JS-based solution; please rate my code, it uses the HTML structure presented in the first code block of my question:const MAX_PAGE_CONTENT_HEIGHT = 972.34const MAX_PAGE_CONTENT_HEIGHT_WITH_RIBBON = 934.80const PAGE_BREAK_CLASS = "computed-page-break"const RIBBON_DECORATION_CLASS = "with-ribbon"for (const pageContent of document.getElementsByClassName('text-flow-page-content')) { let firstPage = true let currentPageContentHeight = 0 let previousElementMarginBottom = 0 for (const element of pageContent.children) { // Compute element height. const elementStyle = getComputedStyle(element) // Hack: 'cuz of margin merging, the biggest margin has to be chosen // between this element's top margin and the previous one's bottom margin. const elementFullHeight = parseFloat(elementStyle.height) + Math.max( parseFloat(elementStyle.marginTop), parseFloat(previousElementMarginBottom) ) previousElementMarginBottom = parseFloat(elementStyle.marginBottom) // Simulate the insertion of the element to the virtual page, // and see if it make the content height exceed the maximum. if (( // Special treatment: extra margin on the first page due to decoration. firstPage && pageContent.parentElement.classList.contains(RIBBON_DECORATION_CLASS) && currentPageContentHeight + elementFullHeight > MAX_PAGE_CONTENT_HEIGHT_WITH_RIBBON ) || ( currentPageContentHeight + elementFullHeight > MAX_PAGE_CONTENT_HEIGHT )) { // In that case: // - Reset the virtual page; // - Put a page break mark; // - Add the element to the new virtual page. firstPage = false element.classList.add(PAGE_BREAK_CLASS) currentPageContentHeight = elementFullHeight } else { // Otherwise, just add the element to the virtual page. currentPageContentHeight += elementFullHeight } }}Note: Just to say that the .page.with-ribbon decoration class adds a background image AND an extra margin to the page... The code I've posted takes this into account, anyone else could find it useless. 这篇关于页边距和背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
08-04 02:33
Powered by LMLPHP ©2024 页边距和背景图像 0.033328