I'm trying to do pagination after a full page div container. Just like loading an introductory page, if you scroll down you can enter a kind of navigation center. I feel like this might be a chrome issue, but the page break item doesn't work in Edge either.
I want to break the page after closing the tab in <div class="pagebreak">. The div contains a background, a subtitle, and a large title, all of which fill (and should fill) a complete page. After that I want to force open a new page so you have to scroll down regardless of screen size.
<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
I hope I understand correctly and this example will be helpful to you
Try this 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%;
}
and try this html
Some picturessome content