Chrome中的HTML网页分页
P粉041881924
P粉041881924 2024-04-02 23:26:08
0
1
586

我正在尝试在全页 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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板