Ich habe viele Inhalte auf meiner Seite, aber ich habe keine Kontrolle darüber, wo sie unterbrochen werden. Ich habe auf jeder Seite etwas Inhalt mit position:fixed
als Kopf-/Fußzeile eingefügt, aber es überlappt den Text. Ich habe versucht, das Überlappungsproblem mithilfe von Rändern und Auffüllung auf die folgenden zwei Arten zu lösen.
Wenn ich mit @page einen Rand hinzufüge
@page { margin: 2cm; }
Wie es heißt, es funktioniert auf jeder Seite, aber meine Kopf- und Fußzeile verschwinden auch von den Rändern.
Also habe ich versucht, mithilfe des Body-Tags einen Rand hinzuzufügen
body { margin: 2cm; /* padding: 2cm; */ }
Es funktioniert, indem auf der ersten Seite ein oberer Rand von 2 cm und auf der letzten Seite ein unterer Rand von 2 cm hinzugefügt wird. Aber nicht zwischen den Seiten.
Ist es möglich, für jede Seite einen Rand/Abstand festzulegen?
我遇到了完全相同的问题,经过大量搜索后,我发现了一篇有趣的文章,提供了一个组合解决方案,您可以阅读此处。
简而言之,它结合了两种方法:
使用
位置:固定
技术使用
thead tbody tfoot
如果您只使用第一种方法,您将面临重叠问题,同样,如果您只使用第二种方法,页脚将粘在页面内容的底部,可能会在最后一页的开头结束,但是结合使用这两种方法可以解决问题。
在这里您可以看到一个有效的演示。
为确保此解决方案正常工作,请尝试按
Print Me!
按钮进行打印。您甚至可能需要在页脚中添加页码,这也是由CSS完成的,您只需要添加以下 CSS:
在一些文章中,它是
内容: counter(page) " of " counter(pages);
,但是在我的例子中,pages
无缘无故一直返回0,所以我忽略了它,也许你可以实现计数使用 CSS var() 计算总页数。郑重声明,如果您不想在打印前观察页眉和页脚,可以添加以下 CSS:
2020 年更新:
页码似乎不再起作用了。