首頁  >  問答  >  主體

Chrome中的HTML網頁分頁

我正在嘗試在全頁 div 容器後進行分頁。 就像載入一個介紹頁面一樣,如果向下捲動,您可以進入一種導航中心。 我覺得這可能是 chrome 問題,但分頁符號項目在 Edge 中也不起作用。

我想要在 <div class="pagebreak"> 的關閉標籤之後分頁。 div 包含一個背景、一個小標題和一個大標題,所有這些都填充(並且應該填充)一個完整的頁面。之後,我想強制打開一個新頁面,這樣您就必須向下滾動,而與螢幕尺寸無關。

<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粉041881924181 天前418

全部回覆(1)我來回復

  • 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

    回覆
    0
  • 取消回覆