Javascript Css打印-内容上的分页符
我有一个网页，它将内容打印在预打印的收据模板上。我面临的问题是，模板在每页上有三个部分。 标题部分，带有票据编号、客户名称等。。 以表格行格式填充的内容节。此部分是动态的，无法预测行数和高度。 页脚部分包含金额总和等 我想保持页眉只在第一页，页脚只在最后一页的底部。动态中间部分应根据内容在多个页面中断开和分布。中间页的页眉和页脚部分在其各自的空间中应保持为空 谁能帮我用html5和css3制作这个结构 你好，这是我的解决方案Javascript Css打印-内容上的分页符,javascript,html,css,printing,Javascript,Html,Css,Printing,我有一个网页，它将内容打印在预打印的收据模板上。我面临的问题是，模板在每页上有三个部分。 标题部分，带有票据编号、客户名称等。。 以表格行格式填充的内容节。此部分是动态的，无法预测行数和高度。 页脚部分包含金额总和等 我想保持页眉只在第一页，页脚只在最后一页的底部。动态中间部分应根据内容在多个页面中断开和分布。中间页的页眉和页脚部分在其各自的空间中应保持为空 谁能帮我用html5和css3制作这个结构 你好，这是我的解决方案 文件 //不显示除打印以外的div @媒体所有{ .分页符{显示：无
文件
//不显示除打印以外的div
@媒体所有{
.分页符{显示：无；}
}
//让它打破这一页
@媒体印刷品{
.page break{显示：块；前分页符：始终；}
#内容{
颜色：蓝色；
}
}
标题
内容
福特
文件
//不显示除打印以外的div
@媒体所有{
.分页符{显示：无；}
}
//让它打破这一页
@媒体印刷品{
.page break{显示：块；前分页符：始终；}
#内容{
颜色：蓝色；
}
}
标题
内容
福特
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
// does not show the div other than print
@media all {
.page-break { display: none; }
}
//make it break the page
@media print {
.page-break { display: block; page-break-before: always; }
#content{
color:blue;
}
}
</style>
<header>
<h1>HEADER</h1>
</header>
<div class="page-break"></div>
<section id="content">
<h1>CONTENT</h1>
</section>
<div class="page-break"></div>
<footer>
<h1>FOTTER</h1>
</footer>
</body>
</html>