使用CSS打印时，内容始终与固定的页眉和页脚重叠

时间：2019-10-25 06:09:02

标签： html css

我要打印固定页眉和页脚的网页出现在每页上而不会重叠。这是我的HTML代码。

<!DOCTYPE html>
<html>

  <body>

    <header>
      <h1>This header will go to every page.</h1>
    </header>  

    <div id="print_content">
      <table>
        <thead>
          <tr style="background-color:#FF0000;">
            <td>Name</td>
            <td>Age</td>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Steven</td>
            <td>25</td>
          </tr>
          <tr>
            <td>Steven</td>
            <td>25</td>
          </tr>
          ...
          ...  
        </tbody>
      </table>
    </div>
    <footer>
      <h1>This is footer will go to every page.</h1>
    </footer>
  </body>

</html>

这是css代码

<style>
footer, header {
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;

}

@media print {

  #print_content {
    margin-top:100px;
  }

  header{
    position:fixed;
    top:0;
  }

  footer{
    position: fixed;
    bottom:0;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}
</style>

在第一页上，标题显示正确结果， enter image description here

但是首页的页脚和内容重叠

enter image description here

第二页之后，现在标题将与内容重叠。 margin-top 中的@media print不再起作用。enter image description here

我真的需要帮助。谢谢。

2 个答案:

答案 0 :(得分：1)

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Demo</title>
  <link rel="stylesheet" href="style.css" />
  <style type="text/css">
    body {
      margin: 0;
    }
    /* Styles go here */
    
    .page-header,
    .page-header-space {
      height: 100px;
    }
    
    .page-footer,
    .page-footer-space {
      height: 50px;
    }
    
    .page-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      border-top: 1px solid black;
      /* for demo */
      background: yellow;
      /* for demo */
    }
    
    .page-header {
      position: fixed;
      top: 0mm;
      width: 100%;
      border-bottom: 1px solid black;
      /* for demo */
      background: yellow;
      /* for demo */
    }
    
    .page {
      page-break-after: always;
    }
    
    @page {
      margin: 20mm
    }
    
    @media print {
      thead {
        display: table-header-group;
      }
      tfoot {
        display: table-footer-group;
      }
      button {
        display: none;
      }
      body {
        margin: 0;
      }
    }
  </style>
</head>

<body>
  <div class="page-header" style="text-align: center">
    I'm The Header
    <br/>
    <button type="button" onClick="window.print()" style="background: pink">
            PRINT ME!
        </button>
  </div>
  <div class="page-footer">
    I'm The Footer
  </div>
  <table>
    <thead>
      <tr>
        <td>
          <!--place holder for the fixed-position header-->
          <div class="page-header-space"></div>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <!--*** CONTENT GOES HERE ***-->
          <div class="page">PAGE 1</div>
          <div class="page">PAGE 2</div>
          <div class="page" style="line-height: 3;">
            PAGE 3 - Long Content
            <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus
            cursus mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl
            et dolor pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio
            posuere suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales
            rutrum. Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque.
            Nunc vel lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod
            massa blandit pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Aenean commodo mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum
            orci, non accumsan sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam.
            Vestibulum lectus justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc
            luctus quis. Ut fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur.
            Nulla nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi
            vestibulum. Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo
            at placerat. Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
          </div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <!--place holder for the fixed-position footer-->
          <div class="page-footer-space"></div>
        </td>
      </tr>
    </tfoot>
  </table>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

答案 1 :(得分：0)

如果使用@media打印，则需要在样式中添加！important，否则页面将使用优先级更高的元素样式。

因为

footer, header {
  color: #f00;
  text-align: center;
}

正在覆盖@media print

中的页眉和页脚样式
相关问题
最新问题