我正在尝试在全页 div 容器后进行分页。 就像加载一个介绍性页面一样，如果向下滚动，您可以进入一种导航中心。 我觉得这可能是一个 chrome 问题，但分页符项目在 Edge 中也不起作用。
我想要在 <div class="pagebreak"> 的关闭选项卡之后分页。 div 包含一个背景、一个小标题和一个大标题，所有这些都填充（并且应该填充）一个完整的页面。之后，我想强制打开一个新页面，这样您就必须向下滚动，而与屏幕尺寸无关。
<body>
<div>
<div class="pagebreak">
<div class="nav">
<nav>
<div class="navitem">
<a href="#webprogrammierung">Webprogrammierung</a>
<a class="name">Niclas Kusenbach</a>
<a href="#verteilteSysteme">Verteilte Systeme</a>
</div>
</nav>
</div>
<div class="container">
<div class="centered">
<h1>Mein Portfolio.</h1>
<h2>Entwicklung verteilter Systeme</h2>
</div>
</div>
</div>
<div class="uebersicht">
<div id="webprogrammierung">
<h3>Webprogrammierung</h3>
<a>Vorlesung 1</a>
<a>Vorlesung 2</a>
<a>Vorlesung 3</a>
<a>Vorlesung 4</a>
<a>Vorlesung 5</a>
<a>Vorlesung 6</a>
<a>Vorlesung 7</a>
</div>
<div id="verteilteSysteme">
<h3>Verteilte Systeme</h3>
</div>
</div>
</div>
</body>
.uebersicht {
display: block;
page-break-before: always;
float: none;
}
.pagebreak {
page-break-after: always;
page-break-inside: avoid;
}
P粉3114235942024-04-03 09:09:59
我希望我理解正确，这个例子会对你有所帮助
试试这个CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.wrapper {
width: 100%;
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.first {
width: 100%;
background-color: red;
flex: 0 0 100%;
}
.second {
width: 100%;
background-color: blue;
flex: 0 0 100%;
}
并尝试这个 html
Some picturessome content