Pagination de pages Web HTML dans Chrome
P粉041881924
P粉041881924 2024-04-02 23:26:08
0
1
584

J'essaie de faire une pagination après un conteneur div pleine page. Tout comme pour charger une page d'introduction, si vous faites défiler vers le bas, vous pouvez accéder à une sorte de centre de navigation. J'ai l'impression que cela pourrait être un problème de chrome, mais l'élément de saut de page ne fonctionne pas non plus dans Edge.

Je veux la pagination après <div class="pagebreak"> la fermeture de l'onglet. Le div contient un arrière-plan, un sous-titre et un grand titre, qui remplissent tous (et devraient remplir) une page complète. Après cela, je souhaite forcer l'ouverture d'une nouvelle page afin que vous deviez faire défiler vers le bas quelle que soit la taille de l'écran.

<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粉041881924
P粉041881924

répondre à tous(1)
P粉311423594

J'espère avoir bien compris et cet exemple vous aidera

Essayez ce 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%;
    }

et essayez ce html

Some pictures
some content
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal