Chrome中的HTML網頁分頁
P粉041881924
P粉041881924 2024-04-02 23:26:08
0
1
464

我正在嘗試在全頁 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粉041881924
P粉041881924

全部回覆(1)
P粉311423594

我希望我理解正確,這個例子會對你有幫助

試試這個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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!