html - 内容上的页眉和页脚...我该如何解决这个问题？

Question

我对内容的位置有很大的疑问。我有大量内容隐藏在页眉和页脚下。我想在每一页上为页眉/页脚设置一个 margin-bottom/top。

这是我的 HTML 文档:

@page {
            margin: 180px 50px;
        }

        #header {
            position: fixed;
            left: 0px;
            top: -180px;
            right: 0px;
            height: 300px;
            background-color: orange;
            text-align: center;
        }

        #footer {
            position: fixed;
            left: 0px;
            bottom: -180px;
            right: 0px;
            height: 300px;
            background-color: lightblue;
        }

        #footer .page:after {
            content: counter(page, upper-roman);
        }

        section {
            margin-top: 100px;
        }

<div id="header">
    <h1>Widgets Express</h1>
</div>
<div id="footer">
    <p class="page">Page </p>
</div>
<section>
    What is Lorem Ipsum?
    <br>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    <br>Why do we use it?
    <br>It is a long established fact that a reader will be distracted by <br>the readable content of a page when looking at its layout.
    <br>The point of using Lorem Ipsum is that it has a more-or-less normal <br>distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
    <br>Many desktop publishing packages and web page editors now use Lorem <br>Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    <br>Various versions have evolved over the years, sometimes by accident,<br> sometimes on purpose (injected humour and the like).


    <br>Where does it come from?
    <br>Contrary to popular belief, Lorem Ipsum is not simply random text.
    <br>It has roots in a piece of classical Latin literature from 45 BC, <br>making it over 2000 years old.<br>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.<br>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.<br>This book is a treatise on the theory of ethics, very popular during the Renaissance.<br>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    <br>The standard chunk of Lorem Ipsum used since the 1500s is reproduced <br>below for those interested.<br>Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H.<br>Rackham.

    <br>Where can I get some?
    <br>There are many variations of passages of Lorem Ipsum available, <br>but the majority have suffered alteration in some form, by injected hum<br>our, or randomised wo<br>rds which don't look <br>even slightly believable.<br>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.<br>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.<br>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.<br>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.


    <br>5
    <br>paragraphs
    <br>words
    <br>bytes
    <br>lists
    <br>Start with 'Lorem
    <br>ipsum dolor sit amet...'
    <br>Generate Lorem Ipsum

</section>

生成的 PDF 如下所示:http://3.1m.yt/28MKkWG.png

Answer 1

您可以使用 css @page 为每个页面添加边距。
你是 header 然后需要一个负边距。例如:

<html>
<head>
<style type="text/css">
    @page { margin-top: 50px; }
    .header { margin-top: -50px; }
</style>
</head>
<body>
<div class="header">Header</div>
Rest of the page.
</body>
</html>

编辑:添加了一个例子