Chrome最新版本- css位置固定，jquery.print()上的底部0问题

bkhjykvo  于 2023-10-14  发布在  Go
关注(0)|答案(3)|浏览(85)

重现问题的步骤：

/* 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;
  }
}
:picture-in-picture ;
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </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.
            </div>
          </td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>
            <!--place holder for the fixed-position footer-->
            <div class="page-footer-space"></div>
          </td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

问题描述：我相信你已经审查了我的代码，我试图检查在不同的Chrome版本和不同的浏览器的代码
Chrome版本- 117.0.5938.92在此版本中，打印页脚未放置在底部，未放置在底部，向上移动很少
Chrome版本116.0.5845.187（Official Build）（x86_64）在这个版本中，打印功能工作正常，但在最新版本中，只有我们面临这种问题
即使它在其他浏览器中也能正常工作
其他备注：
Chrome版本：17.0.5938.92通道：稳定
操作系统：os
最新Chrome版本- 17.0.5938.92 x1c 0d1x
旧Chrome版本- 116.0.5845.187

请参考截图和上面的共享代码。我们得到这个位置固定的问题在Chrome最新版本只
旧版本的Chrome和其他浏览器工作正常
请建议我们如何解决此问题

google-chrome

3条答案

按热度按时间
qacovj5a

qacovj5a1#

尝试在表格中添加页眉和页脚，如下所示

@page {
  size: 8in 11in;
}

.page {
  page-break-after: always;
}
.header {
  height: 60px;
}

.header>div {
  position: fixed;
  top: 0;
  width:100%;
}
.footer {
  height: 60px;
}

.footer>div {
  position: fixed;
  bottom: 0;
  width:100%;
}

body {
  font-size: 24px;
  font-family: sans-serif;
text-align:center;
}
<button onclick="print()">print</button>

<table>
<thead>
<tr>
  <td class="header">
    <div>header</div>
  </td>
</tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="page">page 1</div>
        <div class="page">
          <div>page 2</div>
        </div>
        <div class="page"><div>page 3</div>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
          </div>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="footer">
        <div>footer</div>
      </td>
    </tr>
  </tfoot>
</table>
赞(0）分享  回复(0）举报  2023-10-14
iovurdzv

iovurdzv2#

请尝试以下解决方案：

console.log('Hello!');
/* Styles go here */

.page-header,
.page-header-space {
  height: 100px;
}

.page-footer,s
.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;
  }
}
:picture-in-picture ;
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </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>
  </body>
</html>

解释：-这里有一些要点，将解决您的问题-
1.只要删除边距，我使用的是和你一样的Chrome版本。如果可能的话，请更新Chrome。
1.如果您在代码编辑器中尝试此代码，请通过删除文本和添加文本来查看输出，这样它将消除您的疑虑。
1.这只是我在这里写的一个虚拟代码。这将使你给予一个清晰的概念。

赞(0）分享  回复(0）举报  2023-10-14
mepcadol

mepcadol3#

添加此@page { size：A3肖像}

赞(0）分享  回复(0）举报  2023-10-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com