搜索

首页  >  问答  >  正文

Chrome中的HTML网页分页

我正在尝试在全页 div 容器后进行分页。 就像加载一个介绍性页面一样,如果向下滚动,您可以进入一种导航中心。 我觉得这可能是一个 chrome 问题,但分页符项目在 Edge 中也不起作用。

我想要在 <div class="pagebreak"> 的关闭选项卡之后分页。 div 包含一个背景、一个小标题和一个大标题,所有这些都填充(并且应该填充)一个完整的页面。之后,我想强制打开一个新页面,这样您就必须向下滚动,而与屏幕尺寸无关。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

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

1

2

3

4

5

6

7

8

9

.uebersicht {

  display: block;

  page-break-before: always;

  float: none;

}

.pagebreak {

  page-break-after: always;

  page-break-inside: avoid;

}

P粉041881924P粉041881924267 天前600

全部回复(1)我来回复

  • P粉311423594

    P粉3114235942024-04-03 09:09:59

    我希望我理解正确,这个例子会对你有所帮助

    试试这个CSS

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    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

    1

    2

    3

    4

    5

    6

    7

    8

    <div class="wrapper">

        <div class="first">

            <div>Some pictures</div>

        </div>

        <div class="second">

            <div>some content</div>

        </div>

    </div>

    回复
    0
  • 取消回复