我试图在页面的打印版本上强制分页。我通过对我想要分成新页面的部分进行样式设置来做到这一点。我遇到的问题是，当我打印时，元素之间会插入一个空白页面。因此分页符有效，但在其间添加了额外的空白页。
例如，下面的代码应该打印两页，但实际上总共打印了 4 页（我想要的两页和两页空白页）。
这是页面的完整 html 代码，包括下面的 css；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>DEMO</title>
<style type="text/css">
/* JUST IMPORTS , RESTS & MINIMAL DEFAULTS */
/* CSS reset */
* {
padding: 0;
margin: 0;
}
.container-flex-column {
display: flex;
flex-direction: column;
}
.page-width-mobi {
min-width: 1072px;
max-width: 1072px;
}
.new-page {
page-break-before: always;
box-sizing: border-box;
border-bottom: solid lightgray 20px;
}
.page-size-mobi {
min-height: 1505px;
max-height: 1505px;
min-width: 1072px;
max-width: 1072px;
}
</style>
</head>
<body>
<main class="container-flex-column page-width-mobi">
<section class="new-page page-size-mobi">
<h1>Page 1</h1>
</section>
<section class="new-page page-size-mobi">
<h1>Page 2</h1>
</section>
</main>
</body>
</html>
慕码人8056858
相关分类