recherche

Maison  >  Questions et réponses  >  le corps du texte

Pagination de pages Web HTML dans Chrome

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粉041881924P粉041881924260 Il y a quelques jours579

répondre à tous(1)je répondrai

  • P粉311423594

    P粉3114235942024-04-03 09:09:59

    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

    répondre
    0
  • Annulerrépondre