suchen

Heim  >  Fragen und Antworten  >  Hauptteil

HTML-Webseiten-Paginierung in Chrome

Ich versuche, die Paginierung nach einem ganzseitigen Div-Container durchzuführen. Wenn Sie nach unten scrollen, gelangen Sie, genau wie beim Laden einer Einführungsseite, in eine Art Navigationscenter. Ich habe das Gefühl, dass dies ein Chrome-Problem sein könnte, aber das Seitenumbruchelement funktioniert auch in Edge nicht.

Ich möchte eine Paginierung, nachdem <div class="pagebreak"> der Tab geschlossen wurde. Das Div enthält einen Hintergrund, einen Untertitel und einen großen Titel, die alle eine komplette Seite ausfüllen (und füllen sollten). Danach möchte ich das Öffnen einer neuen Seite erzwingen, sodass Sie unabhängig von der Bildschirmgröße nach unten scrollen müssen. 

<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 Tage vor576

Antworte allen(1)Ich werde antworten

  • P粉311423594

    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 pictures
    
    
    
    
    
        
    some content

    Antwort
    0
  • StornierenAntwort