CODEWITHSUNDEEP
cssprintinghtml-tablestylesheet
Jithin Raj P R
Jithin Raj P R

Reputation: 6797

Fixed Sticky footer for PRINT only for last page

What I have is a <table> it can be big or small sometimes only on one page and sometimes it can grow to be 10 pages and so.

Here is a sample code:

div{
  position:relative;
  height:100vh;
}

.table-blue{
  width:100%;
  background:lightblue;
}

.table-blue td{
  padding:5px 10px;
}

.table-blue-fotter{
    position: absolute;
    bottom: 20px;/* for bottom gap */
    left: 0px;
    width:100%;
    background:gray;
}


@media print {
 .table-blue-fotter{
    position: fixed;
    bottom: 20px;
    left:0px;
    width:100%;
    background:gray;
}
<div>
<table class="table-blue">
  <tr>
    <td>one</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>two</td>
    <td>two test</td>
  </tr>
  <tr>
    <td>three</td>
    <td>three test</td>
  </tr>
</table>

<table class="table-blue-fotter">
  <tr>
    <td>one</td>
    <td>one test</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>two</td>
    <td>two test</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>three</td>
    <td>three test</td>
    <td>one test</td>
  </tr>
</table>

</div>

Fiddle for property inspection - this workes good for me. But if the table gets long the story will change to this.

In the second view when the first <table> gets long, in the print view the footer appears on every page.

So what I want is to the .table-blue-fotter to appear only on the last page of the print view in the page bottom edge no matter the content height is.

enter image description here

only on Last page

Hopping for a CSS fix.

Upvotes: 13

Views: 23795

Answers (5)

Monik Dankhara
Monik Dankhara

Reputation: 1

I ran into the same problem, and what worked for me was setting a white background color for the full content and then applying @media print styles to the footer with z-index: -1.

Here’s a simple example:

/* Apply a white background to ensure content is visible */
.content {
  background-color: white;
}

/* Hide the footer in print mode */
@media print {
  .footer {
    z-index: -1;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 20px;
  }
}

This ensures that the footer does not overlap the main content when printing. Hope this helps!

Upvotes: 0

Dominik Balogh
Dominik Balogh

Reputation: 335

Put the footer after your content and give it a position: absolute; and a bottom: 0; (bottom: 0; is always the bottom of the element's actual page.) Also add a bottom-padding to prevent overlap.

<style>
    .signatures {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
    }

    .content {
        padding-bottom: 100px;
    }
</style>


<body>
    <div class="content">multi page content</div>
    <div class="signatures">sign here</div>
</body>

Hope this helps!

Upvotes: 0

Digex
Digex

Reputation: 1

I had the same issue with a print stylesheet that has a sticky footer for a page that has a header, and a footer. It works when there is only one page. When the html prints more than one page, the footer remains sticky on each page. The Header should only be on the first page, and the footer should be on the last page. I found a solution here: CSS paged media :last page selector

Upvotes: 0

Hanif
Hanif

Reputation: 3795

Update following way:

@media print {
  .table-blue-fotter {
    position: static; /* <-- Key line */
    bottom: 20px;
    left: 0px;
    width: 100%;
    background: gray;
  }

Upvotes: 5

agarwalankur85
agarwalankur85

Reputation: 274

In your CSS, remove position: fixed; from media type print. This is causing the footer to appear on every page.

Checkout https://jsfiddle.net/ur6d1h21/12/

Upvotes: 0

Related Questions