Page-Break on HTML site in Chrome-CodePudding

I'm trying to make a pagebreak after a full-page div container. Like having an introductory page on load and if you scroll down you can get to a kind of navigation center. I feel like this could be a chrome problem but the page-break item didnt work in edge either.

I want the pagebreak after the closing tab of <div >. The div contains a background, a small header and a big header which all fills (and should fill) a complete page. After that I want to force a new page, so that you have to scroll down independent of the screen size.

<body>
        <div>
            <div >
                <div >
                    <nav>
                        <div >
                            <a href="#webprogrammierung">Webprogrammierung</a>
                            <a >Niclas Kusenbach</a>
                            <a href="#verteilteSysteme">Verteilte Systeme</a>
                        </div>
                    </nav>
                </div>
                <div >
                    <div >
                        <h1>Mein Portfolio.</h1>
                        <h2>Entwicklung verteilter Systeme</h2>
                    </div>
                </div>
            </div>
            <div >
                <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;
}

CodePudding user response：

I hope I understood you right and this example will help 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

<div >
    <div >
        <div>Some pictures</div>
    </div>
    <div >
        <div>some content</div>
    </div>
</div>