简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Chrome中的HTML網頁分頁
P粉041881924
P粉041881924 2024-04-02 23:26:08
0
1
416

我正在嘗試在全頁 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
P粉3114235942024-04-03 09:09:59 1樓

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

試試這個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
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！