'CSS @Page - position a div at the bottom of the last page

I am trying to set a block of text in an HTML page using @page to create a printed output for multiple pages.

If set the div of the text block to position: fixed; bottom: 0; then it appears on every page.

If I set the HTML body to position: relative; and the div of the text block to position: absolute; bottom: 0; then it only appears on the first page.

How is it possible to position a block of text at the bottom of the last printed page? This is not a footer to appear in the margins but a block of text in the page that I am trying to position.

Any pointers would be appreciated.

htmlcss


Solution 1:[1]

My solution is as follows. Keep the footer fixed, but set z-index: -1 by doing this, the footer will always hide behind the text until the end of the text, its not a perfect solution, but its feasible solution to replicate your expected result.

print at bottom

html,
body {
  margin-bottom: 20px;
}

.wrapper {
  position: relative;
}

.footer {
  z-index: -1;
  position: fixed;
  bottom: 0px;
  text-align: center;
  width: 100%;
}

.content {
  z-index: 3;
  overflow: hidden;
  padding-bottom: 30px;
  background-color: white;
}

@media print {
  .footer {
    position: fixed !important;
    bottom: 0px;
  }
}
<div class="wrapper">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc ex, iaculis ut maximus vel, euismod in enim. Aenean neque purus, vehicula rhoncus congue sed, sodales et nunc. Quisque pharetra tellus non auctor gravida. Sed in felis accumsan, dapibus
    ex at, elementum urna. Maecenas ut massa faucibus felis aliquam scelerisque. Quisque at molestie nunc. Nullam est nibh, aliquam non augue vitae, tempus imperdiet massa. Mauris sed feugiat lectus. Aenean vel dapibus tortor. In dolor augue, dignissim
    vel blandit eget, laoreet vel mi. In hac habitasse platea dictumst. Pellentesque metus ante, finibus in nisl ac, mollis blandit justo. Nulla a tincidunt orci. Proin malesuada ac est vitae eleifend. Donec tincidunt ipsum felis, ut feugiat dolor mattis
    ac. Integer lectus tellus, tincidunt eget aliquet eu, mattis non dolor. Vivamus tempus sapien at sem aliquam, commodo rutrum quam pulvinar. Praesent eu leo sit amet risus malesuada porttitor quis quis augue. Cras placerat felis quis ligula auctor
    fringilla. Cras efficitur tellus quis velit posuere, et aliquam libero egestas. Donec eu tincidunt felis, ut sodales erat. Phasellus vitae neque massa. Maecenas ut erat nibh. Aenean vitae ligula arcu. Maecenas justo velit, sagittis eget turpis ac,
    tempus congue elit. Morbi egestas nisi risus, quis varius purus varius ac. Donec in viverra augue. Proin vel sem in enim volutpat rhoncus non sit amet diam. Nullam tellus lorem, tempus sit amet accumsan id, finibus ac turpis. Integer quis nunc id
    tortor fermentum bibendum ut in leo. Cras magna velit, pellentesque sit amet dignissim non, aliquam eu odio. Quisque id tristique urna. Donec fermentum dolor vel pharetra placerat. Curabitur ullamcorper iaculis nulla quis sagittis. Proin scelerisque
    ullamcorper porta. Praesent id odio ex. Sed in gravida augue, sed pretium erat. In hac habitasse platea dictumst. Proin congue dolor eu felis lacinia euismod. Aliquam varius, justo ut interdum dapibus, diam nulla molestie ante, eu pellentesque mi
  </div>
  <div class="footer">this is the footer</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions