Question 257753 in Html Question posted in
Some basic documentation can be found here.

Html – Chrome latest version – css position fixed and bottom 0 issue on jquery.print()

Steps to reproduce the problem:
I have created the code in stackbilts kindly check the code
https://stackblitz.com/edit/web-platform-qsxv1t?file=index.html

Problem Description:
i beleave you have reviewed my code not try to check the code in different chrome versions and different browsers

Chrome version – 117.0.5938.92
In this version print footer was not placed in the bottom its not place in the bottome its moved little up

Chrome Version 116.0.5845.187 (Official Build) (x86_64)
In this version its the print function was working fine but in the latest version only we are facing this kind of issues

Even its working fine in other browsers

Additional Comments:

Chrome version: 17.0.5938.92 Channel: Stable

OS:Mac OS

On Latest chrome version – 17.0.5938.92
enter image description here

Old Chrome version – 116.0.5845.187
enter image description here

Kindly refer the screenshot and above shared code. we are getting this position fixed issue in chrome latest version only

old version of chrome and other browsers are working fine

Kindly suggest how can we fix this issue

Tags:

2

Answers


  1. 0

    Try adding header and footer inside the table like below

    @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>
    Login or Signup to reply.
  2. 0

    Please try this solution:-

    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 */
  margin: 20px;
}

.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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search